Мне нужно добавить пользовательские CSS на вкладки JQuery, когда он выбран, как? - PullRequest
Новая
       18

Мне нужно добавить пользовательские CSS на вкладки JQuery, когда он выбран, как?

0 голосов
/ 01 апреля 2011

Мне нужно изменить CSS .ui-state-active, .ui-widget-content .ui-state-active следующим образом: 

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

Однако, когда я это делаю, я получаю желаемый эффект, но другие элементы на веб-сайте затрагиваются при нажатии. Я хочу эту функцию только при нажатии на вкладку.

Есть ли более безопасный способ сделать это?

Вот мой HTML-код: 

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

Ответы [ 3 ]

1 голос
/ 01 апреля 2011

Если я не пойму ваш вопрос неправильно, вы можете просто сделать следующее: 

$('#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")'; 
});
0 голосов
/ 27 августа 2012

Вау! Здесь слишком много вещей!

ОК, во-первых, jQuery великолепен, но он уже сделал свою работу. Чтобы сделать то, что вы пытаетесь достичь, вам не нужен какой-либо JavaScript. Используйте простой CSS.

Часы 

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

Что касается той ссылки, которую я обещал ранее, эта запись в блоге гораздо глубже описывает доступ к выбранным в данный момент вкладкам "вне" "событий вкладок".

0 голосов
/ 01 апреля 2011

Вы можете поместить код в событие select элемента управления вкладкой 

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

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

...