私はこれが信じられないほど簡単であることを知っていますが、私はこの関数を1時間書き直しましたが、成功しませんでした:
<li>
クリックすると、クリックしたリンクに「アクティブ」を追加<li>
し、ナビゲーションバーの他のすべてから「アクティブ」を削除します。
HTML:
<nav>
<ul>
<li><a href="http://0327ea8.netsolhost.com/#home" class="home">Home</a></li>
<li><a href="http://0327ea8.netsolhost.com/blog/" class="blog">Blog</a></li>
<li><a href="http://0327ea8.netsolhost.com/#catalog" class="catalog">Catalog</a></li>
<li><a href="http://0327ea8.netsolhost.com/#authors" class="authors">Authors</a></li>
<li><a href="http://0327ea8.netsolhost.com/#store" class="store">Store</a></li>
</ul>
</nav>
jQuery:
// NAVBAR ADD ACTIVE
$("nav ul li a").click(function(){
$("nav ul li").removeClass('active');
$(this).stop().animate();
$(this).parent().addClass('active');
});
これはクラスをうまく追加していますが、削除することはできません。
また、機能を分離するためにそれを分離しようとしましたが、うまくいきませんでした。
リンクのホバー状態に .animate() があるため、そこに .stop().animate() があります。
ありがとう!
編集:
これはホバーのjQueryであり、.stop().animate()を持っている理由です
$("nav ul li a, aside ul li.categories a, div.posts div.foot a").hover(function(){
$(this).animate({'backgroundColor' : '#edf5e9'}, 200);
},function() {
$(this).animate({'backgroundColor' : '#ccd4c8'}, 600);
});
なぜ .stop().animate() が間違っているのかわかりません。.animate() がない場合、アクティブなクラスは固執しません。もしあれば、アクティブなクラスは固執します。
ただし、クラスを削除することはまだできません:-/