Question

我正在使用这个手风琴...... https://jsfiddle.net/y7czusd7/1/

    $(".tab_content").hide();
    $(".tab_content:first").show();

  /* if in tab mode */
    $("ul.tabs li").click(function() {

      $(".tab_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();        

      $("ul.tabs li").removeClass("active");
      $(this).addClass("active");

      $(".tab_drawer_heading").removeClass("d_active");
      $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

    });
    $(".tab_container").css("min-height", function(){ 
      return $(".tabs").outerHeight() + 50;
    });
    $(".tab_drawer_heading").click(function() {

      $(".tab_content").hide();
      var d_activeTab = $(this).attr("rel"); 
      $("#"+d_activeTab).fadeIn();

      $(".tab_drawer_heading").removeClass("d_active");
      $(this).addClass("d_active");

      $("ul.tabs li").removeClass("active");
      $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
    });

如你所见，我尝试在同一页面上使用2，但只有第一个工作正常，我怎么能解决这两个问题？

谢谢！

Answer 1

您需要在同一页面上使用唯一的DOM ID，因为它无法正常工作。

Answer 2

您在两个标签页上都使用相同的ID，请尝试更改秒数。

Answer 3

我更新了你的小提琴：https://jsfiddle.net/y7czusd7/6/

变化：

1）您需要为HTML中的对象提供不同的ID。重复ID不是有效的HTML，因此JQUERY会查找具有相同ID的所有对象并对其执行操作。在你的情况下，它隐藏了div和两个列表对象中的内容。

为了演示如何解决这个问题我为了简洁起见使用了两个标签，请注意 li 和 h3 元素的 rel 属性匹配 div 元素的 id 属性。此外， tab_container 类的 div 元素现在已设置了ID。

<div class="tabs_wrapper">
  <ul class="tabs">
    <li class="active" rel="tab1">Tab 1</li>
    <li rel="tab2">Tab 2</li>
  </ul>
  <div id="con1" class="tab_container">
    <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
    <div id="tab1" class="tab_content">
      <h2>Tab 1 content</h2>
      <p>Tab 1</p>
    </div>
    <!-- #tab1 -->
    <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
    <div id="tab2" class="tab_content">
      <h2>Tab 2 content</h2>
      <p>Tab 2</p>
    </div>
    <!-- #tab2 -->
  </div>
</div>

<div class="tabs_wrapper">
  <ul class="tabs">
    <li class="active" rel="tab21">Tab 1</li>
    <li rel="tab22">Tab 2</li>
  </ul>
  <div id="con2" class="tab_container">
    <h3 class="d_active tab_drawer_heading" rel="tab21">Tab 21</h3>
    <div id="tab21" class="tab_content">
      <h2>Tab 21 content</h2>
      <p>Tab 21</p>
    </div>
    <!-- #tab21 -->
    <h3 class="tab_drawer_heading" rel="tab22">Tab 22</h3>
    <div id="tab22" class="tab_content">
      <h2>Tab 22 content</h2>
      <p>Tab 22</p>
    </div>
    <!-- #tab22 -->
  </div>
</div>

2）您的JavaScript也需要调整，类 ul.tabs li 的点击功能需要定位正确的 div的 tab_container 类元素。我通过确定活动选项卡的父级（您已经识别）然后使用此对象隐藏所有子div来完成此操作。如下所示，请注意父容器变量，并使用它：

$("ul.tabs li").click(function() { var activeTab = $(this).attr("rel"); var parentContainer = $("#"+activeTab).parent("div.tab_container").attr("id"); $("#"+ parentContainer).children("div").hide(); $("#"+activeTab).fadeIn(); $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_drawer_heading").removeClass("d_active"); $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active"); });

同样可以应用于您的其他点击功能以获得完整性。

希望这有帮助。

页面上有多个手风琴？

3 个答案: