我需要的是选择时它自定义CSS添加到jQuery的标签，怎么样？ [英] I need to add custom css to jquery tabs when it is selected, how?

问题描述

我需要修改的CSS的.ui状态活跃，的.ui小部件内容的.ui状态活跃于以下内容：

 的.ui状态活跃，的.ui小部件内容的.ui状态活跃{
     背景图像：网址（图像/制表over.png'）重要的;！
}
 

然而，当我这样做，我得到当点击网站上的预期的效果，但其他元素会受到影响。我想这个功能只有当我点击一个标签。

有没有一种更安全的方式做到这一点？

下面是我的html code：

 ＆LT; D​​IV ID =标签＆GT;
    ＆LT; D​​IV ID =左侧＆GT;
    ＆LT; / DIV＆GT;    ＆LT; UL类=标签菜单＆GT;
        ＆LT;李ID =家＆GT;
        ＆所述; A HREF =＆下;％= Url.Action（GetCoreTab，标签）％＆gt;中类=一个＆GT;
        ＆LT; B＆GT;
            ＆LT; D​​IV ID =家级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;
        ＆所述; / A＆GT;
        ＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetDatesAndLocationTab，家）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =日期和地点级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetTariffTab，家）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =关税级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetCustomerInformationTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =客户信息级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetRatesAndChargesTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =利率和-费用级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetPaymentsAndVouchersTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =支付和-券级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetDeliveryAndCollectionTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =递送和收集级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetGeneralTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =将军级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetEquipmentAndOtherDriversTab，选项卡）％GT;类=一个＆GT;
            ＆LT; B＆GT;
                ＆LT; D​​IV ID =装备和其他司机级=菜单＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetCustomer preferencesTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =客户为preferences级​​=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＆LT;％= Url.Action（GetCustomerStatisticsTab，选项卡）％GT;类=一个＆GT;＆LT; B＆GT;
            ＆LT; D​​IV ID =以客户为统计级=菜单＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / B＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;    ＆LT; D​​IV ID =右侧＆GT;
    ＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

解决方案

如果我不误解你的问题，你可以简单地做如下：

  $（'＃标签的.tab菜单里一'）。点击（函数（）{
    $（'＃标签的.tab菜单礼）的CSS（背景图片，URL（图像/原始bg.png）'）。
    $（本）.parent（）的CSS（背景图片，URL（图像/制表over.png）'。
}）;
 

I need to modify the css of .ui-state-active , .ui-widget-content .ui-state-active to the following:

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

However, when I do that I get the desired effect but other elements on the website get affected when clicked. I want this function only when I click a tab.

Is there a safer way to do this ?

Here is my html code:

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

解决方案

If I don't misunderstand your question, you could simply do as following:

$('#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")'; 
});

这篇关于我需要的是选择时它自定义CSS添加到jQuery的标签，怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！