CSS - 突出顯示選定的選項卡

我的母版頁中有以下選項卡式導航設置。CSS - 突出顯示選定的選項卡

 <nav class="grid_12"> 
      <ul> 
       <li><a href="#" class="selected">Home</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </nav>

當我點擊組合選項卡上，例如，我想投資組合選項卡以保持突顯了我的土地投資組合頁面上。完成此操作的建議方法是什麼？

我檢查了一些其他帖子，但the most relevant這些使用div的例子中，而不是單獨的頁面。

來源

2012-04-23 MissPiplup

假設您選擇的「所選」類名具有您所談論的突出顯示的樣式。用戶點擊其中一個鏈接後，用jquery，你可以添加「選擇」類到單擊的錨標籤。把它放在關閉body標籤之前或者在你的主JavaScript文件中。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".grid_12 ul li a").click(function() { 
      $(".grid_12 ul li a ").removeClass("selected"); 
      $(this).addClass("selected") 
     }) 
    }) 
</script>

上面的代碼，如果沒有刷新頁面，只有內容的刷新，但是如果你的頁面將會刷新，並轉到了新的一頁，我會做這樣的事情只會工作：

<nav class="grid_12"> 
    <ul> 
     <li><a href="#" class="nav_home">Home</a></li> 
     <li><a href="#" class="nav_portfolio">Portfolio</a></li> 
     <li><a href="#" class="nav_blog">Blog</a></li> 
     <li><a href="#" class="nav_contact">Contact</a></li> 
    </ul> 
</nav>

並添加特定頁面的樣式。例如，當你在www.mySite.com/portfolio在CSS的組合只添加：

a.nav_portfolio{ 
    background-color:orage; 
    ... 
}

這種方式，你甚至不用做任何的JavaScript。

來源

2012-04-23 23:25:18 Sammy

我剛試過這個，但沒有這樣的運氣。我把你的代碼放在head標籤中。這是否必須在我將要使用的所有ASPX頁面中實現，還是要在Master頁面中實現它就足夠了？ – MissPiplup 2012-04-23 23:39:16

將它放在頁面底部，正好在關閉標記之前。這裏是整個代碼： – Sammy 2012-04-23 23:42:05

謝謝薩米，它完美的工作。 – MissPiplup 2012-04-23 23:49:07

CSS - 突出顯示選定的選項卡

回答

相關問題