Say I have a basic website with a navbar that has a few links. When I am on a page (say, Terms of Use), I want the "Terms of Use" link in the navbar to be highlighted. When I switch to a different page, I want that page's link to be highlighted (i.e. I switch to privacy page, and then "Privacy" is highlighted in the navbar).
Does anyone know a simple way to do this with HTML/CSS/JS?
Say I have a basic website with a navbar that has a few links. When I am on a page (say, Terms of Use), I want the "Terms of Use" link in the navbar to be highlighted. When I switch to a different page, I want that page's link to be highlighted (i.e. I switch to privacy page, and then "Privacy" is highlighted in the navbar).
Does anyone know a simple way to do this with HTML/CSS/JS?
Share Improve this question edited Jul 30, 2012 at 22:10 Madara's Ghost 175k50 gold badges272 silver badges314 bronze badges asked Jul 30, 2012 at 22:07 codesw1tchcodesw1tch 72011 silver badges30 bronze badges6 Answers
Reset to default 5A simple way to do it without using javascript or php etc would be to add a different class to the body tag on each page.
<body class="nav-1-on">
Then in your css file:
body.nav-1-on a.nav-1, body.nav-2-on a.nav-2 { color:red )
SO you need XXX classes for however many nav items you have and you put a class on each nav item too as illustrated.
Make sense?
Update (brain fade, had wrong selector). For CSS3 browsers, you can easily target the page name itself:
a[href*=pageNameImOn.htm] {color: red;}
The *= will here match all href paths that include pageNameImOn.htm in them, which would match:
<a href="/my/path/to/file/pageNameImOn.htm">
<a href="/pageNameImOn.htm">
<a href="/pageNameImOn.htm#interalJumpLink">
For the link that you want to be a different color, you can manually set the style
<a style="color:red">My link is red</a>
Probably a better way to do would be to define a class where the color is red
<style> .visited { color:red } </style>
and then for the actual link
<a class="visited">My red link</a>
This solution uses jQuery, jQuery is just a piled code library for javascript really, offering easy to use snippets and functionalities.
The is definitely the easiest way of achieving what you're after, although it is "client-side" so the class will be added by the users machine, rather than being added by the server and then sent to the user. But for smaller sites, it should suffice.
What is happening: This code finds your navigation, here it is looking for the li of .nav, so replace ('.nav li') with whatever your menu class is called, so possibly: ('.mymenu li'). It then sees if the menu link matches the current page, if it does, it adds a class to the li. So you also need to create a class of .active, such as: .active{background-color:blue;}
Hope this helps!
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery('.nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
</script>
Just for the fun of it.
What about a Single page and CSS3 only solution, without any backend code or Javascript:
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="terms" href="#terms">Terms of use</a></li>
</ul>
CSS
li a { color: black; }
#home:target { color: red; }
#terms:target { color: red; }
The :target selector in CSS will match an ID selector that matches the current hash-tag.
Here's some more information: http://reference.sitepoint./css/pseudoclass-target
Pretty good support in Firefox, Safari, Opera and Chrome.
Inplete support in IE9 and IE10:
IE doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all. http://www.quirksmode/css/contents.html
Set a different id on your body to identify the page.
<body id="terms-of-use">
an example nav:
<nav>
<a class="home" href="#">Home</a>
<a class="terms-of-use" href="#">Terms</a>
</nav>
then in your css:
nav a {
// default style
background: blue;
}
#terms-of-use a.terms-of-use {
// if the id of body is terms-of-use then the link with the class .terms-of-use...
background: red;
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744306569a4567742.html
评论列表（0条）