If I have one nav_bar.html file that is included on other pages, how do I show which menu item is active?
Question
thanks for taking the time to read this.
I have a JavaScript (jQuery) navigation bar on my main page that is simply "included" on my page. For example, I have index.shtml that "includes" the nav bar, which is "nav_bar.shtml". And this is the same for every other page. Now clearly, with the current setup, there's no way to show the user which menu item is currently selected since the nav_bar.shtml page stays static.
What I'm wanting to do is STILL have just the one nav_bar.shtml file, but be able to, on the individual pages, show the user the current menu item selected on the nav bar (as in a different shade of color, etc.). If nav_bar.shtml stays static, there's not a very clear way to do this. Is there a workaround to this if I don't want to instantiate an entirely new Javascript nav bar on each and every page? Or would each page need its own version of the nav_bar code specific to that page so it knows which item it needs to shade?
3 answers
solution1
1 ACCPTED 2010-08-14 02:21:49
One way to do this is to write some code to look in your menu, find the href s 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;
}
solution2
0 2010-08-14 01:59:07
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.
solution3
0 2010-08-14 02:12:52
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', '...');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.