SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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:

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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()

  3. #3
    SitePoint Enthusiast greedyman's Avatar
    Join Date
    Jun 2012
    Location
    New World
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •