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

发布于 2024-09-13 23:39:22 字数 398 浏览 9 评论 0原文

感谢您花时间阅读本文。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏花。依旧 2024-09-20 23:39:22

一种方法是编写一些代码来查看菜单，找到其中链接的 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;
}

One way to do this is to write some code to look in your menu, find the hrefs of the links therein, and compare them to the current window.location.pathname. If you have nice clean URLs this isn't too hard. If you have long, complex URLs, it may not be workable.

So, here's the general idea:

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

Assuming your menu looks something like this:

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

And of course:

li.active {
    background-color: yellow;
}

回复收藏 0 原文

一页 2024-09-20 23:39:22

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

I don't know if this is the answer you're looking for. But you don't need any javascript in order to shade certain element in certain page.

You can always take advantage of CSS selectors, for example:

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

In your CSS you can say something like:

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

So, finally, you would only have to change the "id" attribute of the body element to get your shaded menu items.

Anyway, if you're using jQuery you can always use something like:

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

回复收藏 0 原文

温暖的光 2024-09-20 23:39:22

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

You could attempt to detect which page the user is currently on by use of window.location.pathname, and shade the relevant menu item based on this.

Example:

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'
    }
});

If this code was implemented on this page, the first condition would be matched, meaning that shadeMenuItem() would have the element with #questions passed to it.

回复收藏 0 原文

~没有更多了~