CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
mcfly
mcfly

Reputation: 1151

Change tab color in html with javascript

I am trying to change the "look" of a tab when I select it. I have seen this question and this question but I am not sure I understand how to implement this. To be simple, I am using this exact example posted on JSFiddle.

This portion of code in my css does not seem to apply when I click on new tabs:

.tabContainer .digiTabs .selected {
    background-color: #fff;
    color: #393939;
    border-left: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    }

If you look at this example, change tabs, you will see that the tab content changes but not the look of the selected tab heading. I can get my content to change, the only thing not changing is the tab color/background.

My current work is closely following this example so any help you can provide would be great! Also, I am a noob to this stuff which is why I probably can't understand the answer from the other two SO questions. Thanks!

Upvotes: 0

Views: 1698

Answers (1)

cssyphus
cssyphus

Reputation: 40028

First, use $(document).on() instead of .bind (which has been deprecated).

    $(document).on("click", ".t", function(){
        $(".tabContent").each(function(){
            $(this).hide();
        });
        var id = $(this).attr("id");
        $("#t"+id).show();
        $('.t').removeClass('selected');
        $(this).addClass('selected');
    });

Upvotes: 2

Related Questions