Keep states of jQuery at many pages

**greedyman** · Jan 23, 2013 08:25

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:

PHP Code:


<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?

**Pullo** · Jan 23, 2013 09:50

Hi,

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

PHP Code:


<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/show...ass-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()

**greedyman** · Jan 23, 2013 10:05

Originally Posted by Pullo

Hi,

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

PHP Code:


<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/show...ass-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()

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

User Tag List

Thread: Keep states of jQuery at many pages

Thread Tools

Display

Keep states of jQuery at many pages

Bookmarks

Bookmarks

Posting Permissions