JQuery - 突出顯示導航中的當前選項卡

我已經看到了多種突出顯示當前選項卡的方式，但它們都使用單獨的html頁面，因爲我沒有使用不同的頁面，例如about.html，services.html等。JQuery - 突出顯示導航中的當前選項卡

我目前使用的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>

菜單使用背景圖形，所以我想替換爲其他原始圖形。另外，正如你所看到的，我也在使用手風琴菜單。我不確定它會影響最終代碼的多少，但我認爲我應該包括這一點。

來源

2012-03-19 user1164109

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

您的.selectedHeader CSS規則可以改變顏色，背景圖像等

來源

2012-03-19 13:57:39 Dave

雖然我真的很感謝你發佈的代碼，我並不完全確定如何顯示正確的選項卡。例如，我有一個「.about」類的選項卡，我將以什麼方式替換該類。此代碼是否會替換所有其他類以指示它們未使用適當的div激活？ – user1164109 2012-03-19 16:24:33

使用您現有的HideContent和ShowContent函數。 – Dave 2012-03-19 17:17:07

經過了最後15分鐘左右的代碼後，我終於明白了。我注意到，在removeClass括號內，我不需要在類之前加入句點，即.class，而只需要class。非常感謝戴夫，我非常感激。 – user1164109 2012-03-21 15:41:27

JQuery - 突出顯示導航中的當前選項卡

回答

相關問題