重复的 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

您需要使用选择器并将活动添加到具有 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/

Answer 2

显然问题不在于jquery，但是当你点变化时，如果你想同时改变两个选项卡，不要点This，因为this只指被点击的对象，而不是class 一般来说，由于 "input: checked and label"

，pestrañas 当然可以只使用 cSS-3 的效果

Answer 3

我已经在 fiddle 上更新了您的代码。我希望这会奏效。

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
  var indexTab    =  jQuery( "li" ).index(jQuery(this).parent('li'));
  jQuery('ul.tab-links').each(function(){jQuery(this).find('li').eq(indexTab).addClass('active').siblings().removeClass('active');});

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

Updated Fiddle

重复的 jQuery 个标签

Duplicated jQuery Tabs

html

javascript

css

jquery

tabs