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

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

javascript jquery

Javascript 如果有一个nav_bar.html文件包含在其他页面中，如何显示哪个菜单项处于活动状态？,javascript,jquery,navigationcontroller,shtml,Javascript,Jquery,Navigationcontroller,Shtml,感谢您抽出时间阅读此文章我的主页上有一个JavaScript（jQuery）导航栏，它只是“包含”在我的页面上。例如，我有index.shtml，它“包括”导航栏，即“nav_bar.shtml”。每一页都是一样的。现在很明显，在当前设置下，无法向用户显示当前选择的菜单项，因为nav_bar.shtml页面保持静态我想做的是仍然只有一个nav_bar.shtml文件，但能够在各个页面上向用户显示在nav bar上选择的当前菜单项（如不同颜色的阴影等）。如果nav_bar.shtml保持静态，

感谢您抽出时间阅读此文章

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

我想做的是仍然只有一个nav_bar.shtml文件，但能够在各个页面上向用户显示在nav bar上选择的当前菜单项（如不同颜色的阴影等）。如果nav_bar.shtml保持静态，则没有非常明确的方法来实现这一点。如果我不想在每个页面上实例化一个全新的Javascript导航栏，有没有解决方法？或者每个页面是否需要特定于该页面的nav_条形码的自身版本，以便知道需要对哪个项目进行着色？

您可以尝试使用

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（）

将向其传递带有

#问题的元素。
我不知道这是否是您正在寻找的答案。但您不需要任何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>
     ...

因此，最后，您只需更改body元素的“id”属性即可获得着色菜单项
无论如何，如果您使用jQuery，您可以始终使用以下内容：
#homepage #tab-homepage { background-color: red }
#newspage #tab-news { background-color: blue }

$('body').attr('id', '...'); 

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

我想他想保持nav_bar.shtml文件的静态，但对当前页面的菜单项进行着色。。。要么他必须使用Javascript，要么在每个页面上都包含一个不同的导航条文件。你说得对。也许他可以使用window.location和CSS3选择器来获取指向该位置的菜单项，然后更改该项的属性。
li.active {
    background-color: yellow;
}