同一页面上的多个标签问题

Question

＆＃13;

＆＃13;

$(function() {

  $('.tabs .tabsNav a').click(function(e) {
    $('.tabs .tabsNav a.current').removeClass('current');
    $(this).addClass('current');

    $('.tabs div.linkTab:not(:hidden)').hide();
    $(this.hash).show();

    e.preventDefault();
  });


});

＆＃13;

ul.tabsNav li {
  list-style: none;
  display: inline;
}
ul.tabsNav li a {
  background-color: #898989;
  color: #FFF;
  padding: 3px;
  text-decoration: none;
  border-bottom: 0;
}
ul.tabsNav li a.current {
  background-color: #ebebeb;
  color: #000;
}
.tabs div[class="linkTab"] {
  background-color: #FFF;
  display: none;
  overflow: hidden;
  clear: both;
  padding-top: 6px;
  border: solid 1px red;
}
.tabs div.selected {
  display: block;
  background-color: #FFF;
  overflow: hidden;
  clear: both;
  padding-top: 6px;
  border: solid 1px red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tabs">
  <ul class="tabsNav">
    <li><a href="#link1" class="current">Tab1</a>
    </li>
    <li><a href="#link2">Tab2</a>
    </li>
    <li><a href="#link3">Tab3</a>
    </li>
  </ul>

  <div id="link1" class="selected linkTab">
    tab1
  </div>
  <div id="link2" class="linkTab">
    tab2
  </div>
  <div id="link3" class="linkTab">
    tab3
  </div>
</div>

<div class="tabs">
  <ul class="tabsNav">
    <li><a href="#link1" class="current">Tab1</a>
    </li>
    <li><a href="#link2">Tab2</a>
    </li>
    <li><a href="#link3">Tab3</a>
    </li>
  </ul>

  <div id="link1" class="selected linkTab">
    tab1
  </div>
  <div id="link2" class="linkTab">
    tab2
  </div>
  <div id="link3" class="linkTab">
    tab3
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

嗨！我有这个代码

如果有一组标签很有效，但如果是两个（就像在我的小提琴中），当我点击一个按钮时，我的JS改变了相同的div（第一个）。

我想让每一套都独立。

由于

Answer 1

您需要在与所点击的标题相同的.tabs元素中定位元素，并且元素的ID在页面中必须是唯一的。

＆＃13;

＆＃13;

$(function() {

  $('.tabs .tabsNav a').click(function(e) {
    var $tabs = $(this).closest('.tabs');
    $tabs.find('.tabsNav a.current').removeClass('current');
    $(this).addClass('current');

    $tabs.find('div.linkTab:not(:hidden)').hide();
    $(this.hash).show();

    e.preventDefault();
  });


});

＆＃13;

ul.tabsNav li {
  list-style: none;
  display: inline;
}
ul.tabsNav li a {
  background-color: #898989;
  color: #FFF;
  padding: 3px;
  text-decoration: none;
  border-bottom: 0;
}
ul.tabsNav li a.current {
  background-color: #ebebeb;
  color: #000;
}
.tabs div[class="linkTab"] {
  background-color: #FFF;
  display: none;
  overflow: hidden;
  clear: both;
  padding-top: 6px;
  border: solid 1px red;
}
.tabs div.selected {
  display: block;
  background-color: #FFF;
  overflow: hidden;
  clear: both;
  padding-top: 6px;
  border: solid 1px red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
  <ul class="tabsNav">
    <li><a href="#link1" class="current">Tab1</a>
    </li>
    <li><a href="#link2">Tab2</a>
    </li>
    <li><a href="#link3">Tab3</a>
    </li>
  </ul>

  <div id="link1" class="selected linkTab">
    tab1
  </div>
  <div id="link2" class="linkTab">
    tab2
  </div>
  <div id="link3" class="linkTab">
    tab3
  </div>
</div>

<div class="tabs">
  <ul class="tabsNav">
    <li><a href="#link101" class="current">Tab1</a>
    </li>
    <li><a href="#link102">Tab2</a>
    </li>
    <li><a href="#link103">Tab3</a>
    </li>
  </ul>

  <div id="link101" class="selected linkTab">
    tab1
  </div>
  <div id="link102" class="linkTab">
    tab2
  </div>
  <div id="link103" class="linkTab">
    tab3
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您要删除每个current的{​​{1}}类。相反，仅从当前tabsNav移除tabsNav 只需改变

tabs

到

$('.tabs .tabsNav a.current').removeClass('current');

Answer 3

您需要为下一个ul提供不同的ID。你给了同样的ID。

<ul class="tabsNav">
    <li><a href="#link4" class="current">Tab1</a></li>
    <li><a href="#link5">Tab2</a></li>
    <li><a href="#link6">Tab3</a></li>
</ul>           
<div id="link4" class="selected linkTab">
    tab1
</div>
<div id="link5" class="linkTab">
    tab2
</div>
<div id="link6" class="linkTab">
    tab3
</div>

注意： ID应该是唯一的。