-1

サイトにアクセスしたときにデフォルトのリンクの色がアクティブになっていますが、別のリンクをマウスでクリックして新しい現在のページがアクティブになったときに、アクティブから外すことができないようです。これが私のコードです。

JS

$("a").on("click", function() { 
    $(".active").removeClass("active"); 
});

CSS

.active{ 
    color: #ffff00 
    !important; 
}

a { 
    text-decoration: none; 
    z-index: 5; 
    font-family: arial, "Trebuchet MS"; 
    cursor: pointer; 
    color: #2777A3; 
}

HTML

<a href="http://www.pro.com/" target="_self" class="active">Home</a>`

ホームページはデフォルトでアクティブですが、別のリンクをクリックすると、新しいリンクにアクティブな色が表示されません

4

4 に答える 4

2 
$("a").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

http://jsfiddle.net/UbVVH/1/

于 2013-01-18T18:52:17.983 に答える
1

これは、あなたの望むことですか？

$('a').click(function(){
    if ( $(this).hasClass('active') ) {
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }

})
于 2013-01-18T18:50:57.790 に答える
1

activeHTML、CSS、JQuery しかない場合は、各ページの適切なリンクにクラスを設定するだけです。JQuery を使用してクラスを削除する必要はありません。

ユーザーがリンクをクリックすると、ページがリロードされ、CSS がリセットされ、activeクラスがHomeリンクに再び配置されるようです。ユーザーがクリックするたびに、ページが更新され、クラスがリセットされます。

そのため、JQuery は効果的にクラスを削除しますが、リンクをクリックするとブラウザーが新しいページに移動し、CSS がリセットされます。

例：

家

<a href="http://www.pro.com/" target="_self" class="active">Home</a>
<a href="http://www.pro.com/products" target="_self">Products</a>
<a href="http://www.pro.com/solutions" target="_self">Solutions</a>

その他のページ 1

<a href="http://www.pro.com/" target="_self">Home</a>
<a href="http://www.pro.com/products" target="_self" class="active">Products</a>
<a href="http://www.pro.com/solutions" target="_self">Solutions</a>

その他のページ 2

<a href="http://www.pro.com/" target="_self">Home</a>
<a href="http://www.pro.com/products" target="_self">Products</a>
<a href="http://www.pro.com/solutions" target="_self" class="active">Solutions</a>
于 2013-01-18T18:58:31.793 に答える
0

リンクをクリックすると、新しいページが開くので、ページが読み込まれるたびにアクティブなリンクがリセットされると思います。したがって、おそらくやりたいことは、各リンクの現在のページにいるかどうかを確認することです。

だから多分phpで：

<a href="http://www.pro.com/" target="_self" class="<?php echo ($page === 'home' ?  'active' : ''; ?>">Home</a>

純粋な JavaScript を実行する場合:

$(document).ready(function()
{
    var path = window.location.pathname.toString().split('/')[0];

    $("a.active").removeClass("active");
    $("a." + path).addClass("active");

});

リンクに、パスに基づいてマップする名前があることを確認してください。

<a href="http://www.pro.com/" target="_self" class="home">Home</a>`
于 2013-01-18T18:53:08.180 に答える