Question

Im experimenting a bit with jquery and having a big problem which i have been trying to solve for the past day with google but not sure how to figure it out.

I use a index.php page with a simple php script to retrieve my content from a db, i use links like: index.php?title=about (example). I found a small jquery script that adds a class active to the <li> you click on, this works perfect if the url is (#about), it keeps the class active until other link is clicked. but if its an url like “index.php?title=about” its removes the active class.

This is my css / html and jquery, my question is how do i keep the button active when its being clicked.

    <style type="text/css"> 
    .nav li { list-style: none; cursor:pointer; }
    .nav li a { display: block; width: 279px; height: 30px;}
    .nav-home { background: url(img/home.png); width: 279px; height: 27px; }
    .nav-home.active, .nav-home:hover { background: url(img/home_1.png); width: 279px;          height: 27px;}
    .nav-video { background: url(img/video.png); width: 279px; height: 27px; }
    .nav-video.active, .nav-video:hover { background: url(img/video_1.png); width: 279px; height: 27px;}
    .nav-contact { background: url(img/contact.png); width: 279px; height: 27px; }
    .nav-contact.active, .nav-contact:hover { background: url(img/contact_1.png); width: 279px; height: 27px;}
    </style> 

html and jquery:

    <ul class="nav">
    <li class="nav-home"><a href="index.php?title=home"></a></li>
    <li class="nav-video"><a href="index.php?title=video"></a></li>
    <li class="nav-contact"><a href="index.php?title=contact"></a></li>
    </ul>
    <script type="text/javascript">
    $('.nav li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
    });
    </script>

Any help would be really appreciated, kinds regards

Answer 1

If you load a new page, you won’t get track of previous client side interactions.

You have to give the active class in php, or either parse current window.location, get the title value and select <li> element according to this.