2

メニューリンクのプロパティ（色）を変更したいのですが、画面上でどのdivがフォーカスされているかによって異なります。プロジェクトにcurtain.jsを使用していますが、htmlは次のようになります。

<div id="menu">
<a href="#section-1">link 1</a>
<a href="#section-2">link 2</a>
<a href="#section-3">link 3</a>
</div>
<ol class="curtains">
<li id="section-1" class="cover">
.....
</li>
<li id="section-2" class="cover">
.....
</li>
<li id="section-3" class="cover">
.....
</li>       
</ol>

これは、各セクションがハッシュをurlに渡す1ページのレイアウトです。section-1にフォーカスがある場合、urlはxxx / index.html＃section-1になります。

何か案は？

4

3 に答える 3

3

ハッシュをセレクターとして使用して、IDでアクティブな要素をターゲットにし、次に使用siblings()して、他のliの色をデフォルトに戻すことができます。

$(window).on('hashchange', function() {
    $('a[href="'+document.location.hash+'"]').css('color', 'red')
                                             .siblings('a')
                                             .css('color', 'black');
}).trigger('hashchange');

編集：

クリックしたときにリンクの色を変更する方が簡単なようです。

$('#menu a').on('click', function() {
    $(this).css('color', 'red').siblings('a').css('color', 'black');
})
于 2013-01-30T09:47:55.547 に答える
1

jQuery を使用すると、次のように簡単に実行できます。

$(window).bind('hashchange', function (e){
 // do color change
});
于 2013-01-30T09:45:39.670 に答える
1

Jquery を使用すると、そこに到達できるはずです。最初にハッシュを取得します。

var hash = window.location.hash;

次に、使用したい任意の要素に css クラスを追加できます。

$('a[href="' + hash + "]').addClass(hash)

自分では試していませんが、試してみてください

于 2013-01-30T09:45:46.150 に答える