Question

I have a list with 3 items, and I have made a jQuery click event to add a css class to it.
But when I click one of the items the class attribute is set but disapperas directly after.

Any ideas why?

Code:

<ul>
    <li><a id="home" href="home.php">Home</a></li>
    <li><a id="apps" href="apps.php">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

$(document).ready(function() {
    $('#home').click(function (){
        $(this).addClass('btnActive');
    });
});

Answer 1

Updated Answer:

When you follow a link, the entire DOM of the page is torn down and thrown away, and replaced by the DOM created by reading the HTML of the new page. So changes you make to the old DOM don’t persist. If you want the “btnActive” class to be on the link when the page is loaded, you’ll need to modify the HTML of the home.php, apps.php, and support.php pages accordingly.

E.g., for home.php:

<ul>
    <li><a id="home" href="home.php" class="btnActive">Home</a></li>
    <li><a id="apps" href="apps.php">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

…but for apps.php:

<ul>
    <li><a id="home" href="home.php">Home</a></li>
    <li><a id="apps" href="apps.php" class="btnActive">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

Alternately, you could use JavaScript on page load to add the class based on the location.href, but really it’s better to modify the HTML. But just for completeness, since you use the same value for the id of the link and the name of the page, you could do this:

$(document).ready(function() {
    var id = location.href.replace(/.*\/([\w]+)\.php$/, '$1');
    if (id) {
        $("#" + id).addClass("btnActive");
    }
});

That isolates the name of the page from the URL (ignoring any path leading up to it, and stripping off the .php at the end), then uses it as an id and adds the class. Again, I don’t recommend it, but with the URLs you quoted, it should work.

The following original answer was from before I realized (thanks to Rory) that you probably really do need to follow the link.

Original Answer:

Because you never tell the browser not to follow the link, so the page gets reloaded.

You can fix it by either doing return false; out of your event handler:

$(document).ready(function() {
    $('#home').click(function (){
        $(this).addClass('btnActive');
        return false;  // <=== The new bit
    });
});

…or accepting the event argument and calling preventDefault on it:

$(document).ready(function() {
    // Accept the arg ---------v
    $('#home').click(function (event){
        // call the preventDefault
        event.preventDefault();
        $(this).addClass('btnActive');
    });
});

return false in a jQuery event handler does two things:

1. Prevents the default action (in this case, following the link).

2. Stops the event propagating to ancestor elements.

preventDefault just does the first one.