Keep states of jQuery at many pages

JavaScript
1

I have created Hover Menu with jQuery (working with PHP MVC). Assuming that I have a menu like this:

I put class active in blog link. Please see my codes:


<head>
	<meta http-equiv="ContentType" content="text/html; charset=utf8" />
	<title>Hover Menu with jQuery and CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('a.tab').click(function() {
				$('.active').removeClass('active');
				$(this).addClass('active');
			});
		});
	</script>
</head>

But, when I click about link, class active is still in blog link and it’s not in about link. I searched, I know that when I click other link, jQuery is reloaded so my code don’t work. Have you any solution?

2

Hi,

This kind of thing would typically go in the HTML to create your menu:

<div id="nav">
   <ul>
      <li><a <?php echo ($page == 'one') ? "class='active'" : ""; ?> href="index1.php">Tab1</a></li>
      <li><a <?php echo ($page == 'two') ? "class='active'" : ""; ?> href="index2.php">Tab2</a></li>
      <li><a <?php echo ($page == 'three') ? "class='active'" : ""; ?> href="index3.php">Tab3</a></li>
   </ul>
</div>

Here’s a thread discussing this: http://www.sitepoint.com/forums/showthread.php?832399-PHP-include-menu-amp-class-active-CSS

Would that work for you or have I overlooked something?

If you absolutely have to do this in JavaScript, you could always consider using [localStorage()](http://www.jquerysdk.com/api/jQuery.localStorage)

3

Thank so much! I created HTML, CSS, and jQuery. But only jQuery Code, it’s not working in my server (localhost).