重复的 jQuery 选项卡答案

【问题标题】：Duplicated jQuery Tabs重复的 jQuery 选项卡
【发布时间】：2015-08-27 17:51:48
【问题描述】：

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

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

所以，它看起来像：

[标签 1] [标签 2]

--内容

[标签 1] [标签 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 代码是相同的，所以如果它在 tab-list-above 中工作，为什么不能在 tab-list-bottom 中工作？

【问题讨论】：

标签： javascript jquery html css tabs

【解决方案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/

【讨论】：

谢谢。它就像魔术一样起作用。非常感谢你！！如果你愿意回答，我还有一个问题。只要内容很长，用户在更改 tab-list-bottom 上的选项卡时就必须向上滚动到页面。当用户从下面更改标签时，我们可以让页面自动上升吗？
在代码中添加jQuery(".tab-content").scrollTop(0); :)
我尽我所能尝试过，但无法成功。 demo 添加但不以某种方式滚动顶部。
我认为有一个高度 div 如果你想要滚动页面你可以使用jQuery(window).scrollTop(0);
是的，你是对的，有一个名为tab-content 的div class，但它不会在那里滚动，非常奇怪。我不能使用jQuery(window).scrollTop(0);，因为标签有点不在顶部。所以我不明白为什么jQuery(".tab-content").scrollTop(0); 不起作用。

【解决方案2】：

显然问题不是jquery，而是当你点change时，如果你想同时改变两个选项卡不要指向this，因为this只指点击的对象，而不是一般的类，当然由于“输入：检查和标签”，pestrañas 能否达到只使用 cSS-3 的效果

【讨论】：

【解决方案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

【讨论】：