ネストされたメニューが入ったサイドバーがあります。そのメニューはリンクをホストします。現在選択されているメニュー項目にCSSクラスを持たせたいactive。それ、どうやったら出来るの？
https://jsfiddle.net/1wjba46j/
私のjsは次のようになります：
var loc = window.location.href;
$('.nav-side-menu ul li a').each(function () {
var status = loc.indexOf($(this).attr('href')) > -1;
// $(this).toggleClass('active', status);
if (status) {
$(this).closest('li').addClass('active');
}
});
これが単純なjsソリューションです。
// put your mapping here
var mapping = {
"http://example.org/page1": "css.path.to.your.element",
"http://example.org/page2": "path.to.other.element",
}
$(function(){
$(mapping[window.location.href]).addClass('active');
});
これは、ページのURLとnav要素（CSSパス）の間の単純なマッピングにすぎません。
また、その（サブ）メニュー内の項目がアクティブな場合は、メニューを展開することをお勧めします。したがって、次のようなものを追加する必要があります。
$(mapping[window.location.href]).parent("ul").prev("li").addClass("active").click()
必要に応じてエラーチェックを追加します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加