2

これを読んでくれてありがとう。

メイン ページに JavaScript (jQuery) ナビゲーション バーがありますが、これは単にページに「含まれている」だけです。たとえば、「nav_bar.shtml」であるナビゲーションバーを「含む」index.shtmlがあります。そして、これは他のすべてのページでも同じです。明らかに、現在のセットアップでは、nav_bar.shtml ページが静的なままであるため、現在選択されているメニュー項目をユーザーに表示する方法がありません。

私がやりたいのは、nav_bar.shtml ファイルが 1 つだけあることですが、個々のページで、ナビゲーション バーで選択されている現在のメニュー項目をユーザーに表示できるようにすることです (別の色の色合いなど)。 .)。nav_bar.shtml が静的なままである場合、これを行う明確な方法はありません。すべてのページでまったく新しい Javascript ナビゲーション バーをインスタンス化したくない場合、これに対する回避策はありますか? または、各ページには、そのページに固有の nav_bar コードの独自のバージョンが必要で、どのアイテムをシェーディングする必要があるかがわかりますか?

4

3 に答える 3

1

これを行う 1 つの方法は、メニューを調べてhrefその中のリンクの を見つけ、それらを現在の と比較するコードを書くことですwindow.location.pathname。きれいな URL があれば、それほど難しくありません。URL が長くて複雑な場合は、機能しない可能性があります。

したがって、一般的な考え方は次のとおりです。

$(document).ready( function(){
  var thispage = location.pathname.substring(1);
  $('#menu li a[href~="' + thispage + '"]') // ~= is contains. Tweak as needed.
    .addClass('active');
});

メニューが次のようになっているとします。

<ul id="menu">
  <li><a href="page1.html">This</a></li>
  <li><a href="page2.html">That</a></li>
  <li><a href="page3.html">The Other</a></li>
</ul>

そしてもちろん：

li.active {
    background-color: yellow;
}
于 2010-08-14T02:21:49.977 に答える
0

を使用してユーザーが現在どのページにいるかを検出し、window.location.pathnameこれに基づいて関連するメニュー項目をシェーディングすることができます。

例：

function shadeMenuItem(item){
    //Your code to style the given element here
}
$(document).ready(function() {
    if(window.location.pathname.match(/^\/questions.*/)){
        shadeMenuItem($('#questions'));  //shade menu item 'questions'
    }
    else if(window.location.pathname.match(/^\/users.*/)){
        shadeMenuItem($('#users'));  //shade menu item 'users'
    }
});

このコードがこのページに実装されている場合、最初の条件が一致します。つまりshadeMenuItem()、要素が#questions渡されます。

于 2010-08-14T01:59:07.753 に答える
0

これがあなたが求めている答えかどうかはわかりません。ただし、特定のページの特定の要素をシェーディングするために、JavaScript は必要ありません。

CSS セレクターはいつでも利用できます。次に例を示します。

<body id="homepage">
   <ul id="tabs">
     <li id="tab-homepage"><a href="...">homepage</a></li>
     <li id="tab-news"><a href="...">news</a></li>
     ...

CSS では、次のように指定できます。

#homepage #tab-homepage { background-color: red }
#newspage #tab-news { background-color: blue }

したがって、最後に、body 要素の「id」属性を変更するだけで、影付きのメニュー項目を取得できます。

とにかく、jQuery を使用している場合は、いつでも次のようなものを使用できます。

$('body').attr('id', '...');
于 2010-08-14T02:12:52.887 に答える