Solved

JQuery current page

Posted on 2012-03-14
3
304 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 62
How Close unsubmited attempts 10 46
Any Way to rotate banner ads from Commission Junction? 2 37
Top Aligning Inner Divs 5 23
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 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