如何为不同的标签集设置单独的行为？

Question

我正在开发一个功能，我有不同的选项卡集。 我希望每组标签都能自行运行。我的意思是：任何其他一组标签都必须干扰其他组的行为。

到目前为止，我在代码中唯一的错误是，当您单击第一组的任何选项卡时，其他组的选择选项卡的内容将消失。

我需要默认情况下始终选中每一组的第一个标签。

这是JSFiddle I have created.

＆＃13;

＆＃13;

$(document).ready(function() {

  $('.tabs a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.tabs').next('.container').show();

  $('.tabs a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) { //this is the start of our condition 
      $(this).siblings('a').addClass('inactive');
      $(this).removeClass('inactive');

      $(this).parent().nextAll('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });

});

＆＃13;

.tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  padding-right: 2px;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

.tabs a {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #5685bc;
  ;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  display: block;
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-decoration: none;
  outline: none;
}

.tabs a.inactive {
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  color: #666666;
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}

.tabs a:hover,
.tabs a.inactive:hover {
  color: #5685bc;
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
}

.container h2 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  color: #5685bc;
}

.container p {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: small;
}

.container ul {
  margin-left: 25px;
  font-size: small;
  line-height: 1.4;
  list-style-type: disc;
}

.container li {
  padding-bottom: 5px;
  margin-left: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="tabs">

  <a id="tab1">test1</a>
  <a id="tab2">test2</a>
  <a id="tab3">test3</a>
  <a id="tab4">test4</a>

</div>

<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

<div class="tabs">

  <a id="tab5">test1</a>
  <a id="tab6">test2</a>
  <a id="tab7">test3</a>
  <a id="tab8">test4</a>

</div>

<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>

<div class="tabs">

  <a id="tab5">test1</a>
  <a id="tab6">test2</a>
  <a id="tab7">test3</a>
  <a id="tab8">test4</a>

</div>

<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这个想法很简单：

用div包裹你的内容，就像你如何包装你的标签一样（否则他们都是兄弟姐妹）。

现在向所有标签子项添加非活动状态，但每个标签的第一个子项

除外

 $(".tabs a:not(:first-child)").addClass('inactive');

将每个div内容定位.tabs + div（将找到下一个兄弟div）然后隐藏所有不是每个div的第一个孩子的孩子

$(".tabs + div > div:not(:first-child)").hide();

点击标签后，转到父母，然后转到下一个div找到所有孩子（.container）并隐藏它们，然后显示点击的ID。

 $(this).parent().next('div').find('.container').hide();

你也修复了html，有重复的id（确保id是唯一的）

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".tabs a:not(:first-child)").addClass('inactive');
  $(".tabs + div > div:not(:first-child)").hide();

  $('.tabs a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) { //this is the start of our condition 
      $(this).siblings('a').addClass('inactive');
      $(this).removeClass('inactive');

      $(this).parent().next('div').find('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });

});

＆＃13;

.tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  padding-right: 2px;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

.tabs a {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #5685bc;
  ;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  display: block;
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-decoration: none;
  outline: none;
}

.tabs a.inactive {
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  color: #666666;
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}

.tabs a:hover,
.tabs a.inactive:hover {
  color: #5685bc;
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
}

.container h2 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  color: #5685bc;
}

.container p {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: small;
}

.container ul {
  margin-left: 25px;
  font-size: small;
  line-height: 1.4;
  list-style-type: disc;
}

.container li {
  padding-bottom: 5px;
  margin-left: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <a id="tab1">test1</a>
  <a id="tab2">test2</a>
  <a id="tab3">test3</a>
  <a id="tab4">test4</a>
</div>
<div>
  <div class="container" id="tab1C">1Some content</div>
  <div class="container" id="tab2C">2Some content</div>
  <div class="container" id="tab3C">3Some content</div>
  <div class="container" id="tab4C">4Some content</div>
</div>

<div class="tabs">
  <a id="tab5">test1</a>
  <a id="tab6">test2</a>
  <a id="tab7">test3</a>
  <a id="tab8">test4</a>
</div>
<div>
  <div class="container" id="tab5C">5Some content</div>
  <div class="container" id="tab6C">6Some content</div>
  <div class="container" id="tab7C">7Some content</div>
  <div class="container" id="tab8C">8Some content</div>
</div>

<div class="tabs">
  <a id="tab9">test1</a>
  <a id="tab10">test2</a>
  <a id="tab11">test3</a>
  <a id="tab12">test4</a>
</div>
<div>
  <div class="container" id="tab9C">9Some content</div>
  <div class="container" id="tab10C">10Some content</div>
  <div class="container" id="tab11C">11Some content</div>
  <div class="container" id="tab12C">12Some content</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我删除了ID并将其替换为data-tab，因为id应该是唯一的，并且我将所有标签包装起来以仅获取所点击的范围。

$(document).ready(function() {

  $('.tabs a').addClass('inactive');
  $('.tabs a:first-child').removeClass('inactive');
  $('.tab-container .container').hide();
  $('.tabs').next('.container').show();

  $('.tabs a').on('click', function() {
    var $tabContainer = $(this).parents('.tab-container');
    var tabId = $(this).data('tab');
    
    $tabContainer.find('.tabs a').addClass('inactive');
    $(this).removeClass('inactive');
    
    $tabContainer.find('.container').hide();
    $tabContainer.find('.container[data-tab="'+tabId+'"]').fadeIn('slow');
  });
});

.tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  padding-right: 2px;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

.tabs a {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #5685bc;
  ;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  display: block;
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-decoration: none;
  outline: none;
}

.tabs a.inactive {
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  color: #666666;
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}

.tabs a:hover,
.tabs a.inactive:hover {
  color: #5685bc;
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
}

.container h2 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  color: #5685bc;
}

.container p {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: small;
}

.container ul {
  margin-left: 25px;
  font-size: small;
  line-height: 1.4;
  list-style-type: disc;
}

.container li {
  padding-bottom: 5px;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="tab-container">
  <div class="tabs">
    <a data-tab="tab5">test1</a>
    <a data-tab="tab6">test2</a>
    <a data-tab="tab7">test3</a>
    <a data-tab="tab8">test4</a>
  </div>

  <div class="container" data-tab="tab5">5Some content</div>
  <div class="container" data-tab="tab6">6Some content</div>
  <div class="container" data-tab="tab7">7Some content</div>
  <div class="container" data-tab="tab8">8Some content</div>
</div>

<div class="tab-container">
  <div class="tabs">
    <a data-tab="tab5">test1</a>
    <a data-tab="tab6">test2</a>
    <a data-tab="tab7">test3</a>
    <a data-tab="tab8">test4</a>
  </div>

  <div class="container" data-tab="tab5">5Some content</div>
  <div class="container" data-tab="tab6">6Some content</div>
  <div class="container" data-tab="tab7">7Some content</div>
  <div class="container" data-tab="tab8">8Some content</div>
</div>



<div class="tab-container">
  <div class="tabs">
    <a data-tab="tab5">test1</a>
    <a data-tab="tab6">test2</a>
    <a data-tab="tab7">test3</a>
    <a data-tab="tab8">test4</a>
  </div>

  <div class="container" data-tab="tab5">5Some content</div>
  <div class="container" data-tab="tab6">6Some content</div>
  <div class="container" data-tab="tab7">7Some content</div>
  <div class="container" data-tab="tab8">8Some content</div>
</div>