CODEWITHSUNDEEP
javascriptjqueryhtml
JET
JET

Reputation: 55

how to highlight active tab using jquery

How i can highlight a tab that are currently active??? This is my html code.

   <a href="#tab1"></a>
   <a href="#tab2"></a>  
   <a href="#tab3"></a> 
   <a href="#tab4"></a>

And this is my jquery code that i'm currently using

$(document).ready(function(){
            $(".tabs").not(":first").hide();

        $(".tab .control a").click(function(){
            storage = $(this).attr("href");
            $(".tabs").hide();
            $(storage).show();
        });
    });

Upvotes: 2

Views: 1530

Answers (1)

Roland Ruul
Roland Ruul

Reputation: 1242

Add some class to your tabs. Then create CSS class that will be added on clicked element.

HTML:

<a href="#tab1" class="tab">Tab 1</a>
<a href="#tab2" class="tab">Tab 2</a>

CSS:

.tab.active {
    background: gray;
}

JavaScript:

$('.tab').on('click', function() {
    //    Remove .active class from all .tab class elements
    $('.tab').removeClass('active');
    //    Add .active class to currently clicked element
    $(this).addClass('active');
});

Working example: https://jsfiddle.net/cr29y1tc/23/

Upvotes: 2

Related Questions