0

重複の可能性：
クリックするとjqueryがリンクを強調表示する

私はこのナビを持っています：

<div id="nav">
    <ul>
        <li><a href="" data-filter="*">All</a></li>
        <li><a href="" data-filter=".cat1">Category 1</a></li>
        <li><a href="" data-filter=".cat2">Category 2</a></li>
        <li><a href="" data-filter=".cat3">Category 3</a></li>
    </ul>
</div>

そしてプラグインを管理するこのjqueryコード：

 $(document).ready(function(){
    var $container = $('#content_iso');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
    $('#nav a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });

  return false;
});

});

アニメーション用の Css がいくつかありますが、重要ではありません。問題は、ナビゲーションリンクをクリックすると強調表示されるようにしたいのですが、他のリンクをクリックすると、これが強調表示され、他のリンクが強調表示されないようにすることです。追加してみました

$(this).css('border', 'solid black');

クリック機能に追加されましたが、次のリンクをクリックしたときに強調表示されるだけで、元に戻すことはできません。助けてください！！

4

3 に答える 3

3

代わりに css クラスを使用します。

.active{border:1px solid black}

$('#nav a').click(function(){
    $('a.active','#nav').removeClass('active');
    $(this).addClass('active');
}
于 2012-11-17T18:08:32.087 に答える
1 
$('#nav a').click(function(){
   $('#nav a').css('border',''); // <== add this line : remove border on other links
   $(this).css('border', 'solid black');

デモンストレーション

于 2012-11-17T18:05:20.553 に答える
1

または、CSS クラスを介して要素のスタイルを設定し、クリック時にすべてのナビゲーション リンクからこのクラスを削除し、クリックしたリンクに追加することもできます。 

$('#nav a').click(function() {
   $('#nav a').removeClass('selected');
   $(this).addClass('selected');

.selected {
    border: 1px solid #000;
}
于 2012-11-17T18:09:09.050 に答える