Как удалить класс из вкладок jquery и добавить наш собственный класс? - PullRequest
Новая
       11

Как удалить класс из вкладок jquery и добавить наш собственный класс?

2 голосов
/ 05 апреля 2011

У меня есть вкладка 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 для вкладок ONLY (чтобы не затрагивать datetimepicker) и добавить мой класс (содержащий код стиля) .

Спасибо

Ответы [ 2 ]

2 голосов
/ 05 апреля 2011 
<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
0 голосов
/ 05 апреля 2011

$ ("# tabs .ui-widget-header"). RemoveClass ('ui-widget-header'). AddClass ('myClass');

...