How to make a menu link active using javascript/jQuery?
I have a static menu in a common header file. Whenever I visit any of the pages by clicking on the links in the menu, I need an image over that clicked link as an indicator of the activated link.
below is the HTML of menu I am using
<ul id="in-menu">
<li><a href="unleashing-your-heart" >home</a></li>
<li><a hr开发者_开发百科ef="fromdaniella" >from Daniella</a></li>
<li><a href="material-list" >material list</a></li>
<li><a href="program" >program</a></li>
<li><a href="testimonials-2" >testimonials</a></li>
<li><a href="#">login</a></li>
</ul>
How to use jQuery or javascript to make the desired functionality work?
You don't need javascript/jQuery for this
What you can do is to give each of your pages a unique ID or Class on the <body> element or main container div somewhere near the top of the the HTML structure anyway.. then give each of the links in your menu a unique ID or class too (if using classes they can be the same as the first one)
e.g.
<body class="nm-unl">
<ul id="in-menu">
<li class="nm-unl"><a href="unleashing-your-heart" >home</a></li>
<li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li>
<li class="nm-mat"><a href="material-list" >material list</a></li>
<li class="nm-pro"><a href="program" >program</a></li>
<li class="nm-tes"><a href="testimonials-2" >testimonials</a></li>
<li class="nm-log"><a href="#">login</a></li>
</ul>
</body>
So on your Home page the body class might be nm-unl and your login page would have body class nm-log etc.. the menu itself never changes so it can still be in a common file
Then in the CSS each link can be specifically targeted.. so say your plain link does not have an image, but the :hover and your "current" pages do
#in-menu a {background: none;}
#in-menu a:hover {background: url(image.png) no-repeat top center;}
Then you would group the new/specific selectors into the hover rule selectors, those rules are then more specific than the ordinary #in-menu a {} rule, and also they will only ever apply to your "current page link" i.e. when the two classes are the same on a page
.nm-log #in-menu .nm-log a,
.nm-tes #in-menu .nm-tes a,
.nm-pro #in-menu .nm-pro a,
.nm-mat #in-menu .nm-mat a,
.nm-dan #in-menu .nm-dan a,
.nm-unl #in-menu .nm-unl a,
#in-menu a:hover {background: url(image.png) no-repeat top center;}
You still need the #in-menu ID in the selector as well as the two classes because otherwise the selector will not have enough weight to override the default rule
A jQuery solution would work in a similar way, the logic would be the same. You would still need a unique page indicator i.e. a body class or ID then you would check the body ID/Class and add a current class to the relevant, matching link.
Here is a jquery based solution:
1) identify each page some how
2) match that id against your menu items
3) change the css accordingly
<script>
pageID = $('#pageID').val();
$( "li" ).each(function( index ) {
listItemText = $(this).html();
listItemText = listItemText.toLowerCase();
if(listItemText == pageID)
{
$(this).css('color','red');
}
});
</script>
<style>
li{
color:green;
}
</style>
<input type="hidden" id="pageID" value="contact" />
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
http://jsfiddle.net/CnEsF/
There are a lot of ways to do each of these steps, hence the style of my answer. Each step can be executed differently. Id'ing the page might involve the use of a hidden input or some other DOM element, or parsing the URL. Matching would require you to standardize the your script so that your conditional doesn't fail... I used a lowercase method but there are other ways. Finally changing the CSS can be done by assigning a new class that already has the styles, modifying the DOM using jquery, or even assigning the correct class when building the page with PHP.
Hopefully this helps
加载中,请稍侯......
精彩评论