Keep states of jQuery at many pages

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:

	<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() {
			$('').click(function() {

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?


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

<div id="nav">
      <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>

Here’s a thread discussing this:

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()](

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