Question

I have a jQuery tab and I am currently overriding the .ui-widget-header. My code works well. However, I would like to remove the .ui-widget-header class and apply my own class. How can this be done ?

My code:

$(function() 
    {
        $("#tabs").tabs();
        $("#tabs .ui-widget-header").css("float", "left");
        $("#tabs .ui-widget-header").css("background-image", "url('/Content/images/menu_bg_right.png')");
        $("#tabs .ui-widget-header").css("background-repeat", "no-repeat");
        $("#tabs .ui-widget-header").css("background-color", "Transparent");
        $("#tabs .ui-widget-header").css("border", "none");
        $("#tabs .ui-widget-header").css("width", "610px");
        $("#tabs .ui-widget-header").css("height", "50px");
        $("#tabs .ui-widget-header").css("background-position", "left 100%");

});

My Tab code:

<ul class="tab-menu">
        <li><a href="<%= Url.Action("GetCoreTab", "Tab") %>" class="a"><b>
            <div id="home" 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>

I need to remove the .ui-widget-header for the tabs ONLY(So that the datetimepicker wont be affected), and add my class(containing the styling code).

Thanks

Answer 1

<style>
.myClass {
  /* definititions */
}
</style>


<script>
$("#tabs").tabs();
$('#tabs ul').removeClass('ui-widget-header').addClass('myClass'); //assuming you have ULs
</script>

If you want to add each property with JS, you can still do it by getting at the UL element.

$('#tabs ul').css("float", "left")
   .css("background-image", "url('/Content/images/menu_bg_right.png')");
//and so forth