サーバサイド言語を使用せずに「アクティブリンク」のナビゲーションを実装する別の方法はありますか？

Question

「アクティブ」とは、現在のページを指すリンクを「アクティブ」として分類することを意味します。このようにして、リンクの外観はCSSを使用して変更できます。

サーバー側の言語を使用せずにアクティブなリンクのナビゲーションを実装することはできますか？可能であれば、CSS/HTML/jQueryのみを使用したいと思います。存在する場合、それらのメソッドは何ですか？あなたは次の構造を作成したいと仮定すると：CSSで

<ul id="nav"> 
    <li class="active">Home</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul> 

Answer 1

（あなたはjqueryのを必要とする）と言います。

1. サーバサイドで、どのリンクがハイライト表示されているかを判断し、CSSクラスを追加します。
2. 作成するページごとに、クラスを追加するJavaScriptを手動で追加します。

あなたはjQueryのを使用していた場合、あなたができる：

<ul id="nav"> 
    <li id="home">Home</li> 
    <li id="about">About</li> 
    <li id="contact">Contact</li> 
</ul> 

<script> 
    $(document).ready(function(){ 
    $('#contact').addClass('active');//set the Contact "tab" as the active link 
    }); 
</script> 

を可能なすべての場合にかかわらず、これがされるよう、あなたがメニュー構造「を構築する」とき、私はこのサーバー側をやって...＃1を選ぶと思います長期的には維持しやすくなります。

Answer 2

何も現在のURLに解決URLを含む属性に基づいて要素を選択することはできません。

JavaScriptでこれを処理できます（locationを調べる）が、複数のURIが同じドキュメントに解決できるため、それらをすべて考慮する必要があるため、サーバー側のシステムよりも扱いが難しくなります。 JavaScriptで

Answer 3

あなたは可能性はあなたが2つの選択肢があり

$('#active').onClick{ 
window.location: blabla.htm 
} 

Answer 4

jQueryを使用してこれに似たものを実装しました。 私の実装は、私のために働いたhrefで始まるページのURLに依存していました。 （私はASp.Net MVCを使用し、URLはこれに使用できる構造になっていました）。

<ul id="nav"> 

      <li><a href='/Home'>Home</a></li> 

      <li><a href='/Company'>Company</a></li> 

      <li><a href='/Staffing'>Staffing</a></li> 

      <li><a href='/Clients'>Clients</a></li> 

     </ul> 
<script> 
    function setActiveMenu() 
    { 
     var curPage = window.location.pathname; 
     curPage = (curPage.length>1)?curPage:"/Home"; 
     $("#nav > li > a").each 
     (
      function(i, el) 
      { 
       var regEx = new RegExp("^" + $(el).attr("href") + ""); 
       if(regEx.test(curPage)) 
       { 
       $(el).parent().addClass("active"); 
       } 
      } 
     ); 
    } 

$(setActiveMenu) 
</script> 

Answer 5

クラスなし;

 
a:link {color:#FF0000;} /* unvisited link */ 
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;} /* mouse over link */ 
a:active {color:#0000FF;} /* selected link */ 

With JQuery;

 

    $(document).ready(function(){ 
    $('#nav li a').click(function() { 
     $('#nav li').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }); 
    });