-2

javascript、CSS、生の HTML 以外にプログラミングでアクセスできない CMS によって制御されるマスターページにメニュー構造があります。次のようになります。

<div id="menu">
<ul>
<li><a href="Menu1.aspx" target="_self" class="active_nav">Menu Option 1</a></li>
<li><a href="Menu2.aspx" target="_self">Menu Option 2</a></li>
<li><a href="Menu3.aspx" target="_self">Menu Option 3</a></li>
</ul>   
</div>

.active_navそれを、li彼らがいるページのに変更する必要があります。javaScript または jQuery でこれを行う最も簡単な方法は何ですか?

4

2 に答える 2

1

おそらく、現在のウィンドウの位置を使用して、どの li を強調表示する必要があるかを知る必要があります (すべての active_nav クラスをクリアする前に、次のようにします)。

    $('#menu a').each(function() {
      var currentUrl = document.URL;
       if (currentUrl.indexOf($(this).attr('href')) <> -1 ){
         $(this).addClass('active_nav');
       }
});

よろしく

于 2012-12-15T22:54:21.867 に答える
1 
$('#menu>ul>li').click(function() {
    $('#menu>ul>li').removeClass('active_nav');
    $(this).addClass('active_nav');
});

デフォルトでは、CSS クラスにハイフンを使用することができます。それは標準的な慣行です。結局のところ、これは Python ではありません。

また、これはクライアント側または JavaScript で行うべきではありません。JavaScript は、ユーザーが別のページに移動するたびに再読み込みされます。つまり、ブラウザーがターゲットの場所にリダイレクトするまで、リンクにはアクティブなクラスしかありません。しかし、ユーザーがメニュー項目のリンクに移動すると、そのメニュー項目は active_nav クラスを失います。これは、サーバーのセットアップに応じて、JavaScript とその他すべてが catch から、またはその他の方法でリロードされるためです。

肝心なのは、サーバー側からこれを行う必要があるということです。基本的に、PHP または使用しているその他のサーバー側言語でページをレンダリングするときは、URL に基づいて現在のアイテムを強調表示する必要があります。これは物事を行う一般的な方法です。

これを完全に JavaScript で行う唯一の方法は、Ajax アプリケーションを作成する場合です。つまり、ユーザーは実際には別のページに移動せず、サーバーからリアルタイムでロードされる別のコンテンツのみを表示します。使用しているサーバー サイドの言語を教えていただければ、さらにサポートさせていただきます。

また、これは信じられないほどよくある質問であるため、Google も役立ちます。

于 2012-12-15T22:42:15.397 に答える