We help IT Professionals succeed at work.

JQuery current page

petewinter
petewinter asked
on
See my html

<nav>

<ul>
<li><a href="contact.php">Contact</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="building_services.php">Building services</a></li>
<li><a href="about_us.php">About us</a></li>
<li><a href="/">Home</a></li>
</ul>

</nav>

Open in new window


and my css

menu li {
	float:right;
	list-style-type: none;
	padding-left:20px;
	padding-right:20px;
	line-height:40px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}

menu li a:link, a:visited {
	color:#464646;
	text-decoration:none;
}

menu li:hover{
	background-image: url(../images/menu_bg_hover.jpg);
	background-repeat: repeat-x;
}

.current_page{
	background-image: url(../images/menu_bg_hover.jpg);
	background-repeat: repeat-x;
}

Open in new window


How do I use JQuery to get the current page, then if the current page is equal to the link add a class called "current_page" to the li tag?
Comment
Watch Question

Rajar AhmedConsultant
CERTIFIED EXPERT
Commented:
Top Expert 2011
Commented:
  <script type="text/javascript">
    $(document).ready(function() {
	var sPath = window.location.pathname;
	var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

	$("#nav-ul").children('li').each( function(){
		$(this).children('a').each( function() {
			if (sPage == $(this).attr('href')) {
				$(this).parent().addClass("current_page");
			}
		})
	})

    });
  </script>
  <style>
  </style>
</head>
<body>
<ul id="nav-ul">
	<li><a href="contact.php">Contact</a></li>
	<li><a href="gallery.php">Gallery</a></li>
	<li><a href="building_services.php">Building services</a></li>
	<li><a href="about_us.php">About us</a></li>
	<li><a href="/">Home</a></li>
</ul>

Open in new window

Author

Commented:
Many thanks

Explore More ContentExplore courses, solutions, and other research materials related to this topic.