2

感谢您抽时间阅读。

我的主页上有一个 JavaScript (jQuery) 导航栏，它只是“包含”在我的页面上。例如，我有“包含”导航栏的 index.shtml，即“nav_bar.shtml”。这对于所有其他页面都是一样的。现在很明显，在当前设置下，由于 nav_bar.shtml 页面保持静态，因此无法向用户显示当前选择了哪个菜单项。

我想要做的是仍然只有一个 nav_bar.shtml 文件，但能够在各个页面上向用户显示在导航栏上选择的当前菜单项（如不同的颜色阴影等.)。如果 nav_bar.shtml 保持静态，则没有非常明确的方法可以做到这一点。如果我不想在每个页面上实例化一个全新的 Javascript 导航栏，是否有解决方法？还是每个页面都需要它自己版本的特定于该页面的 nav_bar 代码，以便它知道它需要遮蔽哪个项目？

4

3 回答 3

1

一种方法是编写一些代码来查看您的菜单，找到href其中链接的 s，并将它们与当前的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 回答