Question

在我开发一个只有一组标签的功能之前。现在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中看到的那样：第二组选项卡不起作用，我希望它们具有与第一组相同的行为，但是分开，一组选项卡不必干扰其他人。

Answer 1

您将要使用类而不是SELECT DeptNo, BrandDesc,MfgDesc, SUM(IIF(s.Status = 'A', 0, 1)) AS Count_StatusA FROM dbo.SKU AS s GROUP BY s.DeptNo, s.BrandDesc, s.MfgDesc -- ORDER BY s.BrandDesc -- Uncomment this line only when necessary来定位标签。如果您在下面看到我的示例，则只会进行一些更改：

我将CREATE /*UNIQUE*/ /*[NON]CLUSTERED*/ INDEX IUN_SKU_BrandDesc_DeptNo_MfgDesc ON dbo.SKU (BrandDesc, DeptNo, MfgDesc, Status)和id替换为id="tabs"
我更改了事件处理程序以定位类而不是ids
找到相关的id="tabs2"代码后，我会使用class="tabs"
找到相关的a后，我使用siblings()在DOM下面找到容器
显示初始容器类时。我使用.container

＆＃13;

.nextUntil()

＆＃13;

$('.tabs').next('.container')

＆＃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().nextUntil(':not(.container)').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });

});

＆＃13;

Answer 2

好好玩弄你的小提琴。第一句话：将id="tabs"更改为class="tabs"，同时更改javascript和css中的选择器。通过这种改变，它应该让你起作用。

从开发人员的角度来看，我将创建一个jQuery插件，并将代码放入each()函数中，以使其更加灵活，可扩展性更好，并且可以维护。

在jQuery中动态隐藏选项卡中的元素

2 个答案: