0

脚本：

$(".classname li a").each(function() {
    var hreflink = $(this).attr("href");
    if (hreflink == location.href) {
        $(this).addClass("active");
    } else {
        $(this).removeClass("active");
    }
});

CSS：

.classname li a.active{color:#ef9223;}

ページを更新するたびに、同じリンクが別のページにある場合、アクティブなクラスはそのリンクに適用されなくなります。

実際の例私は次のナビゲーションリンクを持っていますABCDEFGH....Z.そして同じナビゲーションがメインページ（ヘッダーセクション）にあります..したがって、いずれかのリンクをクリックすると..に到着したときにアクティブである必要がありますABCDE..またはZページのいずれか1つ。また、ページの更新でも、アクティブなリンクを保持する必要があります。それが説明することを願っています...そして助けます:)

任意のヘルプ、入力、ソリューションをいただければ幸いです。

4

2 に答える 2

1

クラス、またはJavaScriptで追加したものは、ページの更新時に保持されません。それがまさにその仕組みです。

JavaScriptは、ローカルにロードされたHTML要素と構造のみを変更します。ページを更新するか、別のページに移動すると、着信ページの読み込みによってその状態がすべてクリアされます。サーバーは、そのページでユーザーが行ったことを認識していません。デフォルトの状態で新しいページを送信し、JavaScriptが実行されます。このスクリプトには、前のページの読み込みやスクリプトの実行に関する知識もありません。

ページの読み込みを超えて状態を維持する場合は、サーバー側で行う必要があります。これには、サーバーに対してAJAX呼び出しを行って、「アクティブ」にするリンクを通知する必要があります。そうすると、サーバーが責任を負います。後続のページの読み込み時にそのクラスを追加します。

于 2012-04-11T18:07:45.457 に答える
1

各ループ内では、これは実際にはアンカータグであり、クラス'classname'を持つタグではありません。cssは次のようになります。

.active {color:#ef9223;}

また、このコードがページの読み込み時に実行されている場合は、removeクラスは必要ありません。

例として、このjsFiddleをチェックしてください-http ://jsfiddle.net/XWLWL/7/

于 2012-04-11T18:18:48.863 に答える