Question

我用jquery制作了一个标签面板，没什么特别的。单击h6选项卡时，将显示选项卡内容并隐藏所有其他选项卡内容。还添加了活动选项卡类以进行一些样式设置。

工作正常，但它会变得非常重复。任何人都可以帮助以更可重复使用的格式编写它吗？例如，无论重复代码如何，无论我创建多少个标签/标签内容。

html

<div class="tabpanelwrap">
    <div class="tabcontrols">
        <h6>Tab One</h6>
        <h6>Tab Two</h6>
        <h6>Tab Three</h6>
    </div>
    <div id="tab_one" class="tab">
        content
    </div>
    <div id="tab_two" class="tab">
        content
    </div>
    <div id="tab_three" class="tab">
        content
    </div>
</div>

jquery

//hides all but the first tab content
jQuery("#tab_two, #tab_three").hide();

//add a class for styling to the first tab.
jQuery(".tabcontrols h6:nth-child(1)").addClass('dsm-activetab');

    //grabs the first h6 shows first tab content hides all others
    jQuery(".tabcontrols h6:nth-child(1)").click(function () {
        jQuery(".tabcontrols h6").removeClass('dsm-activetab');
        jQuery(this).addClass('dsm-activetab');
        jQuery("#tab_one").show();
        jQuery("#tab_two, #tab_three").hide();
    });

    jQuery(".tabcontrols h6:nth-child(2)").click(function () {
        jQuery(".tabcontrols h6").removeClass('dsm-activetab');
        jQuery(this).addClass('dsm-activetab');
        jQuery("#tab_two").show();
        jQuery("#tab_one, #tab_three").hide();
    });

    jQuery(".tabcontrols h6:nth-child(3)").click(function () {
        jQuery(".tabcontrols h6").removeClass('dsm-activetab');
        jQuery(this).addClass('dsm-activetab');
        jQuery("#tab_three").show();
        jQuery("#tab_one, #tab_two").hide();
    });

Answer 1

你可以这样使用h6的数据属性：）

＆＃13;

//hides all but the first tab content
jQuery(".tab").hide();
jQuery(".tab").eq(0).show();

//add a class for styling to the first tab.
jQuery(".tabcontrols h6").eq(0).addClass('dsm-activetab');


jQuery(".tabcontrols h6").on('click', function() {
  var showId = $(this).data('tab');
  jQuery(".tabcontrols h6").removeClass('dsm-activetab');
  jQuery(this).addClass('dsm-activetab');
  jQuery(".tab").hide();
  jQuery("#"+showId).show();
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="tabpanelwrap">
  <div class="tabcontrols">
    <h6 data-tab="tab_one">Tab One</h6>
    <h6 data-tab="tab_two">Tab Two</h6>
    <h6 data-tab="tab_three">Tab Three</h6>
  </div>
  <div id="tab_one" class="tab">
    content 1
  </div>
  <div id="tab_two" class="tab">
    content 2
  </div>
  <div id="tab_three" class="tab">
    content 3
  </div>
</div>

＆＃13;

Answer 2

这应该避免需要数据属性和特定ID，而是依赖于选项卡的顺序和选项卡内容是相同的。无论您想要添加多少个标签而不更改脚本，它都可以正常工作 - 请注释解释。

//hides all but the first tab regardless of how many you add
jQuery(".tab:gt(0)").hide();

//add a class for styling to the first tab.
jQuery(".tabcontrols h6:first").addClass('dsm-activetab');

//generic handler for any tab that's clicked
jQuery(".tabcontrols h6").click(function () {
    //get the index of the clicked tab
    var index = jQuery('.tabcontrols h6').index(jQuery(this));

    //remove all active tab classes
    jQuery(".tabcontrols h6").removeClass('dsm-activetab');

    //add to the appropriate tab
    jQuery(this).addClass('dsm-activetab');

    //hide all tab content
    jQuery(".tab").hide();

    //show the tab with the same index as the heading
    jQuery(".tab").eq(index).show();
});

标记现在可以......

<div class="tabpanelwrap">
    <div class="tabcontrols">
        <h6>Tab One</h6>
        <h6>Tab Two</h6>
        <h6>Tab Three</h6>
    </div>
    <div class="tab">
        content
    </div>
    <div class="tab">
        content
    </div>
    <div class="tab">
        content
    </div>
</div>

只需确保h6和.tab元素的数量匹配，您就可以了。

整理我的javascript标签

2 个答案: