Highlight current element using javascript
Filed under Featured, javascript
Adding dyamic current link style using javascript.
It makes easy to view where we are in website. I’m talking about when you are at home and home looks different from others. How can one achieve that without even using server side code.
So I’ll give you a easy way of doing this.
Requirement: Please Download mootols scripts.
<div id="topnav"> <ul> <li class="current" id="home"><a href="#">Home</a></li> <li class="link" id="about"><a href="#">About</a></li> <li class="link" id="services"><a href="#">Services</a></li> <li class="link" id="news"><a href="#">News</a></li> </ul> </div>
Use proper CSS and it will be like this
Include your MooTools javascript library.
<script src="js/mootools.js" type="text/javascript"></script>
Add these functions below.
// JavaScript Document //Here add function RemoveAllMenuClass() { $("home").removeClass('current'); $("about").removeClass('current'); $("news").removeClass('current'); $("service").removeClass('current'); } function AddMenuClass(idMenu) { var e1 = $(idMenu); e1.addClass('current'); }
Now just call this below script to highlight the current link.
<script language="javascript" type="text/javascript"> RemoveAllMenuClass(); AddMenuClass('service'); </script>
It will like this
It’s done.
So simple nah?
Any comments/doubts are appreciated.
Popularity: 24% [?]
Share This
Jul23
