在 jQuery 中动态隐藏标签中的元素

反应

在我为只有一组选项卡时开发功能之前。现在 aApp 正在增长，并且选项卡功能正在失败，因为有更多的选项卡集。

第一次函数是这样的：

var iconTabs = function () {

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

    $('#icons-tabs a').click(function(){
        var t = $(this).attr('id');
        if($(this).hasClass('inactive')) {
            $('#icons-tabs a').addClass('inactive');
            $(this).removeClass('inactive');
            $('.icons-container').hide();
            $('#'+ t + 'C').fadeIn('slow');
        }
    });
};

和 html：

<div id="fragment-1" class="fragments text-center">
    <div class="icons-container" id="tab1C">
        {{!-- Content --}}
    </div>

    <div class="icons-container" id="tab2C">
        {{!-- Content --}}
    </div>

    <div class="fragments-parent">
        <div class="fragments-icons fragments-parent--child">
            <div class="items" id="icons-tabs">
                <a href="#" class="item" id="tab1"></a>
                <a href="#" class="item" id="tab2"></a>
                <a href="#" class="item" id="tab3"></a>
                <a href="#" class="item" id="tab4"></a>
            </div>
        </div>
    </div>
</div>

现在html有第二个部分，我还需要再添加3个，所以现在是这样的：

<div id="fragment-1" class="fragments text-center">
    <div class="icons-container" id="tab1C">
        {{!-- Content --}}
    </div>

    <div class="icons-container" id="tab2C">
        {{!-- Content --}}
    </div>

    <div class="fragments-parent">
        <div class="fragments-icons fragments-parent--child">
            <div class="items" id="icons-tabs">
                <a href="#" class="item" id="tab1"></a>
                <a href="#" class="item" id="tab2"></a>
            </div>
        </div>
    </div>
</div>

<div id="fragment-2" class="fragments text-center">
    <div class="icons-container" id="tab5C">
        {{!-- Content --}}
    </div>

    <div class="icons-container" id="ta62C">
        {{!-- Content --}}
    </div>

    <div class="fragments-parent">
        <div class="fragments-icons fragments-parent--child">
            <div class="items" id="icons-tabs">
                <a href="#" class="item" id="tab5"></a>
                <a href="#" class="item" id="tab6"></a>
            </div>
        </div>
    </div>
</div>

我创建了一个 JSFiddle 以防你想玩：

http://jsfiddle.net/ju3a9zx5/

我的任务是动态进行，并且每组选项卡都有单独的行为。正如您在 JSFiddle 中看到的那样：第二组选项卡不起作用，我希望它们具有与第一组相同的行为，但单独的一组选项卡不必干扰其他选项卡。

戴夫

您将要使用类而不是ids 来定位您的选项卡。如果您在下面看到我的示例，则只有一些更改：

我更换id="tabs"和id="tabs2"使用class="tabs"
我更改了事件处理程序以针对类而不是 id
找到a我使用的相关标签时siblings()
找到相关时，.container我用来.nextUntil()在 DOM 中找到下面的容器
显示初始容器类时。我用$('.tabs').next('.container')

$(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().nextUntil(':not(.container)').hide();
      $('#' + t + 'C').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="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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。