javascript - 重复的 jQuery 标签

Question

我的标签内容上方有标签。

只要我的标签内容很长，我也会在标签内容下方复制我的标签。

所以，它看起来像:

[tab 1] [tab 2]

--content

[tab 1] [tab 2]

我使用 css 和 jQuery。

当我更改上面的选项卡列表时，通常 css 效果会发生变化。但它在底部的选项卡列表中没有变化。

底部也是如此；当我在选项卡列表底部更改选项卡时，css 效果仅在底部发生变化但在选项卡列表上方没有变化。

我想立即更改它们，因为它看起来很困惑。

HTML:

<div class="tabs">

    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>  

    <div class="tab-content">

        <div id="tab1" class="tab active">#1 content</div>

        <div id="tab2" class="tab">#2 content </div> 

    </div>

    <div class="tabs">

        <ul class="tab-links">
            <li class="active"><a href="#tab1">Tab #1</a></li>
            <li><a href="#tab2">Tab #2</a></li>
        </ul>

    </div>

</div>

JavaScript:

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
       jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400); 

       // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

       e.preventDefault();
    });
});

jsFiddle:

http://jsfiddle.net/4m2ut16k/

*

我希望它能像那样工作，因为 CSS 代码是相同的，所以如果它在上方的标签列表中工作，为什么不能在标签列表底部中工作？

Answer 1

您需要使用选择器并将 active 添加到所有具有 a 且具有相同 href

的 li

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
       jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400); 

       console.log(currentAttrValue);
        jQuery(".tab-links li").removeClass("active");
        jQuery('a[href="'+currentAttrValue+'"]').parent('li').addClass('active');

       e.preventDefault();
    });
});

http://jsfiddle.net/4m2ut16k/1/