jQuery：アクティブなクラス/状態を追加し、それを保持する！

Question

これは可能かどうかは分かりませんが、今は左側のナビゲーションバーにリンクがたくさんあります。私はアクティブなクラス（状態）を追加していますが、リンク先のユーザーがクリックしているURLには、そのURLと現在のページURLが表示されます。これはうまくいく。

$("#sidebar-nav ul li a").each(function() { 
if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname) 
$(this).addClass("active"); 
}); 

各サイドバーのリンクは、「カテゴリ」そうを表すのでしかし、私は。人々は、彼らが上陸したその最初のページの他のページにクリックしている間、その要素のアクティブ状態/クラスを「保持」を続行する必要があります私はサイドバーのリンクを、URLが一致する最初のページだけではなく、アクティブにしておきたい。

ユーザーが最初に着陸したページ内をクリックすると、URLがもう一致しないため、アクティブな状態が失われます。私は、別のsidbar navをクリックすると、アクティブ状態を削除したいだけです。これは理にかなっていると思いますが、サイドバーnav ulの別の要素をクリックしない限り、最初はアクティブな状態に設定されています。

HTML：

<div id="sidebar-nav"> 
    <ul>       
    <li><a href="link1">Link One</a></li> 
    <li><a href="link2">Link Two</a></li> 
    <li><a href="link3">Link Three</a></li> 
    <li><a href="link4">Link Four</a></li> 
    </ul> 
</div> 

Answer 1

最も簡単な（それはページの機能を阻害しない限り）私は考えることができる方法は、リンクとにアンカーを通過した後、ページのロードにdocument.location.hashをチェックして、カテゴリを「選択」でありますそれに応じて。彼らは現在のパスで始まる場合

はまた、あなたがすでにHREFを比較していることから、単に以下を想定した（パスの場所を比較し、:)

<ul> 
    <li><a href="/cateogry">Cateogory 1</a><ul> 
    <li><a href="/category1/sub1">Sub 1</a></li> 
    <li><a href="/category1/sub2">Sub 2</a></li> 
    <li><a href="/category1/sub3">Sub 3</a></li> 
    </l></li> 
    ... 
</ul> 

上記のリンクがされている場合（とターゲットURLの先頭です）、ハイライト表示に保存されます。

（つまり、あなたのリンクはナビゲーションのように入れ子になっています）。そうでない場合は、リンクとハッシュを使用せずに疑似変数を渡してからJavaScriptを使用して解析することもできます（もう一度、ページの読み込み時に）。

Answer 2

URLの最初の部分がこの「カテゴリ」の予想されるシーケンスと一致するかどうかを確認する正規表現に基づいて、URL一致ロジックを変更する必要があります。最初の二つのリンク上の例では

ex. http://www.mysite.com/cars/priceguide.html 
     http://www.mysite.com/cars/listings.html 
     http://www.mysite.com/buses/priceguide.html 

は「車」カテゴリとしている：URLは「カテゴリ」は、それがであるかを示すように、これはカテゴリ内の各ページが編成されていると仮定して当然です最後は「バス」カテゴリにあります。

Answer 3

正規表現を使用すると、関連するフラグメントのURLを評価できます。これはあなたのURLスキームにも依存します。例えば、あなたのサイトには、URLを使用する場合は、次のように：

www.mysite.com/products 
www.mysite.com/products/widget 
www.mysite.com/products/wodget 

あなたが最初のディレクトリレベル（www.mysite.com/products）を抽出して使用することができることを、あなたのアクティブリンク参照として。