0

アンカータグ/リンクでクラスを切り替えるJQueryのこの単純な部分があります。私が知らないのは、他のリンクがクリックされたときにクラスをトグルまたは追加/削除する方法です。例: クラスはクリックされたリンクにのみ適用でき、一度に複数のリンクに適用することはできません。それが私が立ち往生しているところです。まあ、私はそれを行う方法がわかりません。

次に、JQuery Cookie を使用して現在のリンクをアクティブに保つにはどうすればよいですか。Cookie 拡張機能をダウンロードしました。

これが私がやったことです：

HTML:

<ul class="navbar">
 <li><a  href="#/">Link1</a></li>
 <li><a href="#/">Link2</a></li>
 <li><a  href="#/">Link3</a></li>
</ul>

CSS:

.activeLink{
    color: #930;
}

JQuery:

$(document).ready(function() {
$('.navbar li a').click(function(){
    $(this).toggleClass('activeLink');
}); 
});

ありがとうございました！！

4

2 に答える 2

1

以下は、イベント伝播を使用するソリューションです。

$(function() {

    var $activeLink,
        activeLinkHref = $.cookie('activeLinkHref'),
        activeClass = 'activeLink';

    $('.navbar').on('click', 'a', function() {
        $activeLink && $activeLink.removeClass(activeClass);
        $activeLink = $(this).addClass(activeClass);
        $.cookie('activeLinkHref', $activeLink.attr('href'));
    });

    // If a cookie is found, activate the related link.
    if (activeLinkHref) 
    $('.navbar a[href="' + activeLinkHref + '"]').click();

});​

これはデモです (JSFiddle にはサポートがないため、Cookie 機能はありません)。

于 2012-08-05T23:03:16.240 に答える
0

これが私のやり方です。少し単純化されていますが、脳に大きな負担をかけることなく仕事を完了できます。

<ul class="navbar">
 <li><a  href="#/">Link1</a></li>
 <li><a href="#/">Link2</a></li>
 <li><a  href="#/">Link3</a></li>
</ul>

<script>
$(document).ready(function() {
$('.navbar li a').click(function(){
    $('.navbar li a').css('color', 'black');
    $(this).css('color', '#930');
}); 
});
</script>
于 2012-08-05T22:33:50.473 に答える