CODEWITHSUNDEEP
jqueryhtmlcss
Shaun
Shaun

Reputation: 131

jQuery Change Color of Selected Tab

I've created 3 tabs using jQuery and I'm trying to change the background color of the selected tabs.

I've found many entries on highlighting an active tab in jQuery and tried following these examples. But I'm having a difficult time implementing the examples so I'm not sure what I'm doing wrong.

Here is the code for my tabs:

<div id="informationTabs">
  <ul id="tabs">
    <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" id="tab1Href">Email            &amp; Phone</a></li>
    <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" id="tab2Href">Main Address</a></li>
    <li class="individual-tab" id="mailingTab"><a href="#tabs-3" id="tab3Href">Mailing Address</a></li>
  </ul>
  <div id="tabs-1" class="tabs-windows">
    Change Email and Phone
  </div>
  <div id="tabs-2" class="tabs-windows">
    @Html.Action(Model.MainAddressPartialView)
  </div>
  <div id="tabs-3" class="tabs-windows">
    Mailing Address
  </div>
</div>

Here is the JQuery I'm using to create the tabs and set an active tab on page load:

$("#informationTabs").tabs();
$(function() {
    $("#informationTabs").tabs({ selected: 1 });
});

This is a css class I'm trying to use to set the background of the selected tab. This is located in a separate css class that is rendered in the view. The other classes work fine.

#tabs .ui-tabs-active {
    background: #5ba63c;
}

Am I forgetting a JQuery function anywhere or a setting that should be setting the background color of a selected tab?

Thanks in advance.

Upvotes: 2

Views: 9538

Answers (2)

Shaun
Shaun

Reputation: 131

Thank you a1111exe, caeth, and macsupport for taking the time to put this on JSFiddle and check into it. I looked into the JQuery plugin that Macsupport recommended and it looks like we're using jquery tabs 1.8.24. When I inspected the element I noticed that this version of jquery was using the class .ui-state-active. So when I changed that in the css then I was getting the result. See below:

#tabs .ui-state-active {
background: #5ba63c !important;
}

Thanks again, Shaun

Upvotes: 5

a1111exe
a1111exe

Reputation: 641

Not sure that this is exactly what you're looking for, but this example (at least in Firefox) demonstrates one way (maybe not the best) to alter css on switching tabs:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script>
$(document).ready(function () {
        // Initialize active tab background color
        $("#informationTabs").tabs({
            create: function (e, i) {
                $('a.tab').css('background-color', 'white');
                i.tab.children('a').css('background-color', 'red');
            }
        });
        // Change the background color on activate
        $("#informationTabs").tabs({
            activate: function (e, i) {
                $('a.tab').css('background-color', 'white');
                var current = $('a[href="#' + i.newPanel.attr("id") + '"]');
                current.css('background-color', 'red');
            }
        });
});
</script>
</head>
<body>
<div id="informationTabs">
    <ul id="tabs">
        <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" class="tab" id="tab1Href">Email            &amp; Phone</a></li>
        <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" class="tab" id="tab2Href">Main Address</a></li>
        <li class="individual-tab" id="mailingTab"><a href="#tabs-3" class="tab" id="tab3Href">Mailing Address</a></li>
    </ul>
    <div id="tabs-1" class="tabs-windows">
        Change Email and Phone
    </div>
    <div id="tabs-2" class="tabs-windows">
        @Html.Action(Model.MainAddressPartialView)
    </div>
    <div id="tabs-3" class="tabs-windows">
        Mailing Address
    </div>
</div>
</body>
</html>

Hope this helps.

P.S. This seems to be a nice tutorial on jQuery UI tabs.

P.P.S. As caeth mentioned your way works just fine (and much better in all means than I did above). I've put your code in local html file and if Firefox it changes colors very nice:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css" />
<style type="text/css">
#tabs .ui-tabs-active {
    background: #5ba63c;
}
</style>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script>
$("#informationTabs").tabs();
$(function() {
        $("#informationTabs").tabs({ selected: 1 });
});
</script>
</head>
<body>
<div id="informationTabs">
    <ul id="tabs">
        <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" id="tab1Href">Email            &amp; Phone</a></li>
        <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" id="tab2Href">Main Address</a></li>
        <li class="individual-tab" id="mailingTab"><a href="#tabs-3" id="tab3Href">Mailing Address</a></li>
    </ul>
    <div id="tabs-1" class="tabs-windows">
        Change Email and Phone
    </div>
    <div id="tabs-2" class="tabs-windows">
        @Html.Action(Model.MainAddressPartialView)
    </div>
    <div id="tabs-3" class="tabs-windows">
        Mailing Address
    </div>
</div>
</body>
</html>

Upvotes: 1

Related Questions