Solved

JQuery current page

Posted on 2012-03-14
3
315 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

690 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