0

我有一个奇怪的问题。我有两个选项卡，如下所示。另一个将包含静态 html 代码，另一个由 ajax 搜索填充。只要“项目搜索结果”选项卡处于活动状态，搜索就会很好地工作，但如果不是，则不会发生任何事情。但这不是问题，问题是如果用户点击另一个选项卡，搜索结果会消失，静态内容会重新出现。问题是，有没有办法让它们粘起来？我在服务器端使用 Django，以防它有所作为。

我正在使用这里的自制标签代码（也粘贴在下面）： http: //papermashup.com/simple-jquery-tabs/ 我猜问题是“隐藏”和“显示”做了很多比我想象的还要多。

<div class="span6 main-content" id="tabs">
    <ul class="nav nav-tabs">
     <li><a href="#our-goals">Our Goals</a></li>
     <li><a href="#project-search-results">Search Results</a></li>
   </ul>
  <div id="our-goals">
    goals here
  </div>
  <div id="project-search-results">
    search
    <!-- filled with ajax -->
  </div>
</div>

标签js代码

$(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});
});
4

1 回答 1

0 
$('#tabs div').hide();

上面的语句隐藏了选项卡 div 中的所有 div。所以你应该使用
$('#tabs > div').hide();它只隐藏顶级（直接子）div。

http://jsfiddle.net/RUk5W/

于 2013-08-04T22:32:28.400 回答