jquery - jqueryタブからクラスを削除して独自のクラスを追加するには?

Question

jQuery タブがあり、現在.ui-widget-headerをオーバーライドしています。私のコードはうまくいきます。ただし、.ui-widget-header クラスを削除して、独自のクラスを適用したいと考えています。これはどのように行うことができますか？

私のコード:

$(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%");

});

私のタブコード:

<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>

タブのみの.ui-widget-headerを削除し(datetimepicker が影響を受けないように)、クラスを追加する必要があります (スタイリング コードを含む)。

ありがとう

Answer 1

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


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

JSを使用して各プロパティを追加する場合でも、UL要素を取得することで追加できます。

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

Answer 2

$("#tabs .ui-widget-header").removeClass('ui-widget-header').addClass('myClass');