Question

我有3个html框如下：

<div class="tabs">
  <ul class="tabNav">
    <li><a href="#video">Video Gallery</a></li>
    <li><a href="#photo">Photo Gallery</a></li>
  </ul>
  <div  id="video"> video div </div>
  <div  id="photo"> photo div </div>
</div>
 <div class="tabs">
  <ul class="tabNav">
    <li><a href="#comment">comment</a></li>
    <li><a href="#links">links</a></li>
  </ul>
  <div  id="comment"> comment div </div>
  <div  id="links"> links div </div>
</div>

对于show和hide标签我使用了这个jquery代码：

$(function () {
              var container = $('div.tabs > div');
              container.hide().filter(':first').show();

              $('div.tabs ul.tabNav a').click(function () {
              container.hide();
              container.filter(this.hash).show();
              $('div.tabs ul.tabNav a').removeClass('selected');
              $(this).addClass('selected');
              return false;
              }).filter(':first').click();
  });

此代码仅适用于firts框（图库），并且页面加载时，注释和链接也会隐藏。我怎么解决这个问题？提前致谢

Answer 1

如果我理解正确，你希望这些标签彼此分开工作，即同时选择照片和链接，这样就会显示照片div和链接div。在您在加入环境中运行的代码中，您可以选择这四个div中的任何一个，但只会显示其中一个。为了分别操作div.tabs，下面的代码将起作用：

$(function () {
   $('div.tabs').each(function(i, tabs) {
      var container = $('div', tabs);
      container.hide().filter(':first').show();

      $('ul.tabNav a', tabs).click(function () {
          container.hide();
          container.filter(this.hash).show();
          $('ul.tabNav a', tabs).removeClass('selected');
          $(this).addClass('selected');
          return false;
      }).filter(':first').click();
   });
});

请注意，首先它会选择div.tabs，然后在每个div中为它们做魔术。

我的jquery代码中的所有div

1 个答案: