Highlight current page in jquery

by

Jimmy is right. When you reload a page, the browser also refreshes the Javascript code, which means all the variables and settings you made will also be reset. This is why the class appears to be removed when you click on the link.

The solution here would be to modify your code to loop through all the links and compare each one to the current page’s URL. When you find a match, then call the addClass function for that link to change its colour. So, something like this should work:

$(function(){

    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);

    $('#container ul li a').each(function() {
    if ($(this).attr('href') == pathname)
    {
        $(this).addClass('current');
    }
    });
});

Note that we are calling this looping function on page load, rather than calling it when user clicks on a link… because clicking on a link will cause the page to reload which will reset all the JQuery variables.

Hope this helps.

More Related Contents:

  1. Need Pattern for password field?
  2. Regex for Email Address along with name format [duplicate]
  3. Regular expression to match non-ASCII characters?
  4. Including a hyphen in a regex character bracket?
  5. Extract hostname name from string
  6. split string only on first instance of specified character
  7. Remove whitespace and line breaks between HTML elements using jQuery
  8. How to pull the file name from a url using javascript/jquery?
  9. Get URL from background-image Property
  10. Wrap tags around http text
  11. javascript regex for password containing at least 8 characters, 1 number, 1 upper and 1 lowercase [duplicate]
  12. How can I select an element by ID with jQuery using regex?
  13. Regex to Match Symbols: !$%^&*()_+|~-=`{}[]:”;’?,./
  14. Javascript regex returning true.. then false.. then true.. etc [duplicate]
  15. Extract all email addresses from bulk text using jquery
  16. Split a string based on multiple delimiters
  17. Insert dash after every 4th character in input
  18. Insert space before capital letters
  19. jQuery Youtube URL Validation with regex
  20. How to convert a Title to a URL slug in jQuery?
  21. Regular expression with the cyrillic alphabet
  22. JavaScript Regex to match a URL in a field of text
  23. Regular expression for only characters a-z, A-Z
  24. regular expression to validate datetime format (MM/DD/YYYY) [duplicate]
  25. Regex for allowing alphanumeric,-,_ and space
  26. Why this regex is not working for german words?
  27. Remove everything within script and style tags
  28. Match all URLs in string and return in array in JavaScript
  29. Regular Expression to MATCH ALL words in a query, in any order
  30. Find and replace nth occurrence of [bracketed] expression in string

Leave a Comment