[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

JQuery current page

Posted on 2012-03-14
3
Medium Priority
?
340 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 400 total points
ID: 37721323
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 1600 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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to implement server side field validation and display customized error messages to the client.
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 tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

612 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