www.webdeveloper.com
Results 1 to 6 of 6

Thread: jQuery Menu Removing Class when Clicking Back Button

  1. #1
    Join Date
    Dec 2009
    Location
    Vancouver, BC
    Posts
    5

    jQuery Menu Removing Class when Clicking Back Button

    I have a jQuery menu that isn't working like it should when you click the back button. There is a class of "selected" in html for the link of the page that you are currently on. jQuery removes the class and adds the class "hovering" when you hover over other links. The problem is that when you click the back button the class of "selected" remains on the link you just visited instead of for the link of the page you are actually on. I am a newbie but I am assuming that the html is overwritten.

    So far I've tested it only on FF, IE and Chrome. This problem is only encountered on FF. I was wondering if there is a way in to revert back to the original CSS class in the html. The menu can be tested here.

    Here is the html:

    HTML Code:
    <div id="menu">
    
    <ul>
    
    <li id="menuitem0" class="selected"><a href="index.html">HOME</a></li>
    <li id="menuitem1"><a href="link1.html">Link1</a></li>
    <li id="menuitem2"><a href="link2.html">Link2</a></li>
    <li id="menuitem3"><a href="link3.html">Link3</a></li>
    <li id="menuitem4"><a href="link4.html">Link4</a></li>
    <li id="menuitem5"><a href="link5.html">Link5</a></li>
    <li id="menuitem6"><a href="link6.html">Link6</a></li>
    
    </ul>
    
    </div><!--menu-->
    Here is the jQuery code:

    Code:
    jQuery(document).ready(function($) {
    jQuery(function($){
          var pathmatch = location.pathname.match(/([^\/]+)$/);
          // set selected by the current pathname, or default to Home...
          if( !pathmatch || !$('#menu a[href$="' + pathmatch[1] + '"]').addClass('selected').length){
            $('#menu a').eq(0).addClass('selected');
          }
          $('#menu a')
            .hover(function(ev){
              // add (or remove) 'hovering' class to the parent LI and its parent UL...
              $(this).parent().parent().andSelf().toggleClass('hovering',ev.type==='mouseenter');
            })
          });
    
    });

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Not sure if it's causing problems, but the following rows does the exact same thing:
    Code:
    jQuery(document).ready(function($){ // executes when the page has loaded
    jQuery(function($){ // also executes when the page has loaded
    You should choose one way or the other instead of nesting them.

    Also, you're only adding the "selected" class to links; never removes them. Maybe you should remove the class="selected" from the LI element in the html code.

    Edit: With those changes it works for me in Firefox (v16.0.2).
    Last edited by ReFreezed; 11-11-2012 at 09:59 AM.

  3. #3
    Join Date
    Dec 2009
    Location
    Vancouver, BC
    Posts
    5
    Sorry if this sounds stupid as I am a newbie. How can remove the class?

  4. #4
    Join Date
    Oct 2012
    Posts
    15
    its easy add css into classes just use # sign.

  5. #5
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Quote Originally Posted by accustar View Post
    Sorry if this sounds stupid as I am a newbie. How can remove the class?
    You can use removeClass() to remove classes. It works just like addClass(), which you're using in your code.

  6. #6
    Join Date
    Dec 2009
    Location
    Vancouver, BC
    Posts
    5
    Sorry if my questions sound stupid but I am a newbie. Where should I add the code the remove class. I tried playing with it and it worked but it upset the hovering function. This what I tried:

    Code:
      jQuery(function($){
       removeClass('selected')
          var pathmatch = location.pathname.match(/([^\/]+)$/);
          // set selected by the current pathname, or default to Home...
          if( !pathmatch || !$('#menu a[href$="' + pathmatch[1] + '"]').addClass('selected').length){
            $('#menu a').eq(0).addClass('selected');
          }
          $('#menu a')
            .hover(function(ev){
              // add (or remove) 'hovering' class to the parent LI and its parent UL...
              $(this).parent().parent().andSelf().toggleClass('hovering',ev.type==='mouseenter');
            })
          });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles