I need to add custom css to jquery tabs when it is

Question

I need to modify the css of .ui-state-active , .ui-widget-content .ui-state-active to the following:

.ui-state-active , .ui-widget-content .ui-state-active {
     background-image: url('images/tab-over.png') !important;
}

However, when I do that I get the desired effect but other elements on the website get affected when clicked. I want this function only when I click a tab.

Is there a safer way to do this ?

Here is my html code:

<div id="tabs">


    <div id="left-side">
    </div>



    <ul class="tab-menu">
        <li id="home">
        <a href="<%= Url.Action("GetCoreTab", "Tab") %>" class="a">
        <b>
            <div id="home" class="menu">
            </div>
        </b>
        </a>
        </li>
        <li><a href="<%= Url.Action("GetDatesAndLocationTab", "Home") %>" class="a"><b>
            <div id="dates-and-location" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetTariffTab", "Home") %>" class="a"><b>
            <div id="tariff" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetCustomerInformationTab", "Tab") %>" class="a"><b>
            <div id="customer-information" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetRatesAndChargesTab", "Tab") %>" class="a"><b>
            <div id="rates-and-charges" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetPaymentsAndVouchersTab", "Tab") %>" class="a"><b>
            <div id="payments-and-vouchers" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetDeliveryAndCollectionTab", "Tab") %>" class="a"><b>
            <div id="delivery-and-collection" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetGeneralTab", "Tab") %>" class="a"><b>
            <div id="general" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetEquipmentAndOtherDriversTab", "Tab") %>" class="a">
            <b>
                <div id="equipment-and-other-drivers" class="menu">
                </div>
            </b></a></li>
        <li><a href="<%= Url.Action("GetCustomerPreferencesTab", "Tab") %>" class="a"><b>
            <div id="customer-preferences" class="menu">
            </div>
        </b></a></li>
        <li><a href="<%= Url.Action("GetCustomerStatisticsTab", "Tab") %>" class="a"><b>
            <div id="customer-statistics" class="menu">
            </div>
        </b></a></li>
    </ul>

    <div id="right-side">
    </div>

</div>

Answer 1

WHOA! Way over-extending things here!

OK, First of all, jQuery is great, but it has already done the work. To do what you are trying to achieve, you don't need ANY JavaScript of any kind. Use simple CSS.

Watch:

/*  FYI: The following CSS selector can also be used to make changes 
    via JavaScript/jQuery to Currently selected tab.
    I have a blog post about that I'll list at the end of my answer */
.ui-tabs-selected {
    background-image: url('images/tab-over.png') !important;
} /* This will change the background of the 
     currently selected li element acting as the tab */

/*  If you would like to change the background or something of current panel,
    you would access it with the following CSS selector */
.ui-tabs-panel:not(.ui-tabs-hide) {
    background-image: url('images/tab-over.png') !important;
} /* This will change the background of the 
     currently selected div element acting as the panel */

As for that link I promised earlier, this blog post goes into much more depth about ez access to currently selected tabs "outside" of the "tabs events".

Answer 2

If I don't misunderstand your question, you could simply do as following:

$('#tabs .tab-menu li a').click(function() {
    $('#tabs .tab-menu li').css('background-image', 'url("images/original-bg.png")');
    $(this).parent().css('background-image', 'url("images/tab-over.png")'; 
});

Answer 3

You could put the code in the select event of the tab control

$( "#tabs" ).tabs({
   select: function(event, ui) { 
     //ui.item has the current object for you.
   }
});

http://docs.jquery.com/UI/Tabs#event-select