CSS - 選択したタブを強調表示します

Question

マスターページに次のタブ付きナビゲーション設定があります。私はポートフォリオ]タブをクリックすると

 <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は別々のページではなくdivsを使用しています。

Answer 1

「選択された」クラス名を使用すると、あなたが話しているハイライトのスタイリングがあります。ユーザーがjqueryを使用してこれらのリンクの1つをクリックすると、クリックされたアンカータグに「selected」クラスを追加できます。これを閉じる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> 

特定のページのスタイリングを追加します。たとえば、あなただけの追加ポートフォリオのCSSにwww.mySite.com/portfolioにしているとき：

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

この方法であなたも、任意のJavaScriptを行う必要はありません。