如何通过添加类将图像添加到默认选择的 JQuery 选项卡？

Question

我有一个 jQuery 选项卡，我需要在其中添加图像。

所以当选择一个选项卡时，它看起来像

这是通过以下代码实现的：

        $(".ui-state-active").css("background-image", "url('/Content/images/tab-over.png')");
        $('#tabs .tab-menu li a').click(function() {
            $('#tabs .tab-menu li').css("background-image", "none");
            $(this).parent().css("background-image", "url('/Content/images/tab-over.png')");
        });

它工作正常，期望在我想要的第一行代码中删除该类（.ui-state-active）并添加我自己的类。那怎么办呢？这是我的选项卡代码：

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

感谢任何帮助。

谢谢。

Answer 1

我建议您覆盖 .ui-state-active 类并删除与其关联的所有样式。此类被添加到激活的元素中，因此删除覆盖它的样式应该可以。