現在のタグクラスを現在のページに適用しますか？

私はナビゲーションメニューを持っています。このメニュー内では、現在選択されているタグがあり、現在のタグを参照しています。したがって、各HTMLページ内では、ナビゲーションメニュー内でユーザがどんなページ上にあっても、選択されたアイテムは、どのページにあるかを知らせる意味でハイライト表示されます。現在のタグクラスを現在のページに適用しますか？

問題がありますか？ JavaScriptやjQueryで自動的にこれを行うことができるようにしたいと思います。なぜなら、これをコンテンツ管理システムやインクルードの中で実装することになるからです。また、ナビゲーションの場合は現在のページにクラスを適用することができませんMENUは静的なHTML/CSSに対抗するインクルードです。

それは意味がありますか？アイデア

ありがとうございました！ Aaron

出典

2011-12-15 Aaron Brewer

あなたが任意のコードを付属していないとしてURLがメニューのリンクに等しい場合、私はあなたの一般的な例を与えることができますが、これはうまくいくかもしれません。

$('.navigation>ul>li>a').each(function(){ 
    if($(this).prop('href') == (window.location.pathname.match(/.*\/(.*)$/)||['',''])[1]){ 
    $(this).addClass('current'); 
    } 
});

出典

2011-12-15 17:22:47

私はこれを適用しようとしましたが、うまくいかなかった、私はそれがURLの完全な場所を見つけることを試みていると思うが、私が持っているのはローカルURL、したがってindex.html、about.htmlなどです。 ..jsfiddle.net/rw9zsそれほど事実上私は.navigation uliにそれを適用しなければならないので、私はサブメニューに干渉しません。何か案は？どうもありがとうございます！ –

すべてのli要素またはトップレベルにのみクラスを適用する必要がありますか？ –

私は私の答えを編集しましたが、私が誤解した場合は記入してください。正規表現はパスのファイル名としか一致しませんが、ファイルが同じフォルダにある場合にのみ動作します。 –

これはおそらく何か？ JavaScriptを使用して各リンクのHREFを現在のページのURLと比較し、一致する場合は強調表示します。

$('.menulink').each(function() { 
    var href = $(this).attr('href'); 
    var tarr = location.href.split('/'); 
    var curr = tarr[tarr.length-1]; 
    if (href===curr) { 
     $(this).addClass('current'); 
    }; 
});

出典

2011-12-15 17:22:17 Blazemonger

私はこれを適用しようとしたが、それは動作しませんでした、私はそれがURLの完全な場所を見つけようとしていると思いますが、私が持っているすべてのなど、about.html、したがってindex.htmlを、ローカルのURLですこれは、何を意味するのですか... http://jsfiddle.net/rw9zs/ 実質的に私はそれを.navigation ul liに適用しなければならないので、私はサブメニューに干渉しません。何か案は？ありがとうございました！ –

あなた自身のコードを見ることなく、私はあなたをさらに助けることができません。 – Blazemonger

たぶんURLをつかむために、そこからあなたがページをチェックでき、要素を強調するためのナビゲーションメニューに一致var path = window.location.pathname;を使用しています。

出典

2011-12-15 17:29:15 danferth

現在のタグクラスを現在のページに適用しますか？

答えて

関連する問題