Question

我有一个奇怪的问题。我有两个标签，如下所示。另一个将包含静态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>

Tabs js code

$(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;
});
});

Answer 1

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

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

http://jsfiddle.net/RUk5W/

来回更改标签时，Ajax搜索结果会消失

1 个答案: