Question

感谢您花时间阅读本文。

我的主页上有一个JavaScript（jQuery）导航栏，只是“包含”在我的页面上。例如，我有index.shtml“包含”导航栏，即“nav_bar.shtml”。每个其他页面都是如此。现在很清楚，使用当前设置，由于nav_bar.shtml页面保持静态，因此无法向用户显示当前选择的菜单项。

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

Answer 1

执行此操作的一种方法是编写一些代码以查看菜单，找到其中href的链接，并将它们与当前window.location.pathname进行比较。如果你有干净的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;
}

Answer 2

您可以尝试使用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的元素。

Answer 3

我不知道这是否是您正在寻找的答案。但是你不需要任何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', '...');

如果我有一个包含在其他页面上的nav_bar.html文件，如何显示哪个菜单项处于活动状态？

3 个答案: