Question

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

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

所以，它看起来像：

[tab 1] [tab 2]

- 含量

[tab 1] [tab 2]

我使用css和jQuery。

当我更改上面的tab-list时，通常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代码是相同的，所以如果它在tab-list-above中工作，为什么不在tab-list-bottom中工作呢？

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，因为这仅指单击的对象，而不是一般的类，当然由于“输入：检查和标签”

，pestraraas可以实现仅使用cSS-3的效果

Answer 3

我已经在小提琴上更新了你的代码。我希望这会奏效。

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选项卡

3 个答案: