Geek Answers Handbook

Duplicate jQuery Tabs

I have tabs above the contents of my tab.

While my tab is long, I duplicate my tabs also under the contents of the tab.

So it looks like this:

[tab 1] [tab 2]

- content

[tab 1] [tab 2]

I am using css and jQuery.

When I change the tab above, the effects of css usually change. but it does not change in the bottom list of tabs.

The same is true for the bottom; when I change the tab at the bottom of the list of tabs, css effects only change at the bottom, but not above the list of tabs.

I want to change them right away because it looks confusing.

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/

*

I expected it to work like this because the CSS codes are the same, so if it works in tab-list-above, why not work in tab-list-bottom?

+4
3

li, a href

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/

+3

-, jquery, , , , , , , pestrañas cSS-3 "input: checked and label"

0

I updated my violin code. I hope this works.

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 script

0
source

More articles:


All Articles