3

Web サイトの #page1 にいるとき、#page1 のメニュー項目を現在のページ スタイルのように強調表示したいと思います。クラスを追加して、以下のコードで css を直接適用しようとしましたが、どちらも機能しません。

誰が私が間違っているのか教えてもらえますか? 前もって感謝します。

var url = window.location.href;
if (url.search("#page1") > 0) {
$("#mainNav ul li a.scroll1").addClass("current");
$("#mainNav ul li a.scroll1").css("color","#000");
}
4

2 に答える 2

2

それを検索window.location.hashしてセレクターとして使用できるように思えます。たとえば、 をオンhttp://localhost/index.php#page1にしている場合、ウィンドウ オブジェクトから返されるハッシュ値は になります#page1。それを使用して要素を検索できます。

// Reference to hash, or empty string
var page = window.location.hash;

// If the resulting string isn't empty
if ( page.length ) {
    // Target the corresponding element, add a class
    $( "a." + page.slice(1).replace(/page/,'scroll') ).addClass( "selected" );
}
于 2012-10-24T03:55:59.017 に答える
0

この質問の後、私はこの質問に対する非常に簡単な解決策を見つけました。以下のコードは、クリックされたときに LI に Current Page クラスを作成し、他のすべての現在のページ クラスを他のメニュー LI から同時に削除します。

HTML

<ul>
<li class="scrollButton1 current"><a href="#page1">Welcome</a></li>
<li class="scrollButton2"><a href="#page2">Education</a></li>
<li class="scrollButton3"><a href="#page3">Triathlon</a></li>
<li class="scrollButton4"><a href="#page4">Register</a></li>
</ul>

Jクエリ

$(document).ready(function(){
$('.scrollButton1').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton1').addClass('current');});
$('.scrollButton2').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton2').addClass('current');});
$('.scrollButton3').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton3').addClass('current');});
$('.scrollButton4').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton4').addClass('current');});
});

お役に立てれば。

于 2012-11-30T05:08:35.240 に答える