Solved

JQuery current page

Posted on 2012-03-14
3
268 Views
Last Modified: 2012-03-14
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?
0
Comment
Question by:petewinter
3 Comments
 
LVL 18

Assisted Solution

by:Rajar Ahmed
Rajar Ahmed earned 100 total points
ID: 37721323
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 400 total points
ID: 37721454
  <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

0
 

Author Closing Comment

by:petewinter
ID: 37721548
Many thanks
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now