
See, how you can smartly do the things by using few lines of jQury code.
jQuery:
Add following line inside the existing script file or new file.$(function () {
$(".navigation a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
CSS:
We are using a class name called 'active' in above code to highlight the area and you can understand that we have to add this class inside a stylesheet..navigation li { display:inline; list-style-type:none;}
.navigation li a { padding:5px;}
.navigation li a.active {background:red; color:#fff; padding:5px;} /* this class uses for highlight the active link */
HTML:
Pleased see the following HTML code where we use a class name called 'navigation' to selecting it from the jQuery.<nav> <ul class="navigation">Assuming most of the readers can understand the benefits of using this, however I will recommend creating 2 – 3 pages html for testing purpose to understand it properly that how it works even after page refresh or in new page access.
<li><a href="http://www.24xhtml.com/">Home</a></li>
<li><a href="http://www.24xhtml.com/search/label/jQuery">jQuery</a></li>
<li><a href="http://www.24xhtml.com/p/contact-us.html">Contact 24 xhtml</a></li> </ul> </nav>
Note: Do not forget to add jQuery Library :)
Hope it's helpful for you, please share if you care for others.
Assuming most of the readers can understand the benefits of using this, however I will recommend creating 2 – 3 pages html for testing purpose to understand it properly that how it works even after page refresh or in new page access. entrust coupons
ReplyDelete