Dynamic css class jQuery

Question

I want the link to have a different style on page load. For example, if I click the About Us menu item and go to the page I want it show as highlighted to let the user know they are on that page Using jQuery.

I have tried the following code:

$("#navigation").click(function()
{
    $('li').addClass('current-menu-item');
});

monkeyinsight · Accepted Answer · 2013-04-13 04:17:19Z

1

After triggering 'About Us', your link will change class, but when page will load, all js changes will disappear. You need change class not on click, but onload page, based on your location

$(function() {
    if (window.location == '/about') // change about to what you page on
        $('#navigation li a[href=/about]').parent().addClass('current-menu-item'); // change here link too
});

answered Apr 13, 2013 at 4:17

monkeyinsight

4,8771 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skukx · Accepted Answer · 2013-04-13 21:01:38Z

0

If you have a list

On the Server side you'll want to keep track which page you are on. There are many ways you could do this but one way is

<ul>
    <li data-link="home">Home</li>
    <li data-link="about">About Us</li>
    <li data-link="contact>Contact</li>
</ul>

and if using php for example

$(document).ready(function() {
    var currentPage = "<?= $page ?>";
    $('li[data-link='+currentPage+']').addClass('current-menu-item');
});

Handling which link gets the class 'current-menu-item' is much better on the server side but for a quick example i did it using jquery.

Any time you want something done on page load you can place it in $(document).ready http://api.jquery.com/ready/

Edit

One quick and easy way of setting $page is in the page requested itself so...

about.php

<?php
    $page = "about"
?>
<html>
    ....
</html>

There are many ways of doing this so you just need to get creative. That's the beauty of programming :)

edited Apr 13, 2013 at 21:01

answered Apr 13, 2013 at 4:43

skukx

6275 silver badges16 bronze badges

3 Comments

skukx Over a year ago

In the php that delivers each of the pages you'll need to specify the page. So if you have a file called about.php that is your about page you could set $page = "about", then do the above. For home.php $page = "home"

faix Over a year ago

I am fetching the links of Navigation bar from the database using mysqli_fetch_array where i have to specify this $page variable......????

faix Over a year ago

brother I have tried the above methods..but still its not working....any other solution u can suggest...i hav extensively googled but i get nothing that works......

Collectives™ on Stack Overflow

Dynamic css class jQuery

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related