JQuery - 突出显示导航中的当前选项卡

Question

我见过很多方法来突出显示当前选项卡，但它们都是使用单独的 html 页面，因为我没有使用不同的页面，例如 about.html、services.html 等。

我目前正在使用 div 来提供我需要的信息，每当我单击“关于”选项卡时，div 就会显示有关信息。但我不确定如何突出显示该选项卡。

这是我在正文中的 html 内容:

<div id="wrapper">
<ul><li><a href="Javascript:ShowContent('about');
                 Javascript:HideContent('graph')"
                 class="about"></a></li>

    <div class="portfolio"><a class="portfolio"><span>Portfolio</span></a></div>

    <div class="accordionContent">
            <a href="Javascript:HideContent('about');
                     Javascript:ShowContent('graph')"
                class="graph"></a>
    </div>
</ul>

菜单使用背景图形，所以我想用另一个图形替换原始图形。另外，正如你所看到的，我也使用了 Accordion 菜单。我不确定它会对最终代码产生多大影响，但我认为我应该包括它。

Answer 1

$(".tabHeader").click(function() {
    $(".selectedHeader").removeClass("selectedHeader");
    $(this).addClass("selectedHeader");
    // Do your other stuff to show the correct tab.
});

.selectedHeader 的 CSS 规则可以更改颜色、背景图像等。