如何从 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');