How to give active menu item different styling

Question

My menu is a bunch of links which I then use CSS to style as buttons

<div id="menu">
   <a href="" class="mybutton">Item 1</a>
   <a href="" class="mybutton">Item 3</a>
   <a href="" class="mybutton">Item 3</a>
</div>

When a menu item is clicked and is active, what's the best way to style it differently? Do I use jquery or javascript to add a new class? or there's a CSS trick for this?

Answer 1

CSS's :active pseudo-class can be used:

a.mybutton:active {
    /* rules */
}

Answer 2

The CSS trick is

#menu a:active {
    color: #f00;
}

Same for :hover and :visited

Good luck!

EDIT

Seeing now that you want the link to the page you're on being styled differently, I need more details. Do you use PHP? Don't you use one php script per page?

Anyway, this should work, in case you have a header.php file that you include in all your pages or you're simply lazy to hard-code the classes for every link.

PHP:

// Return $return if this page is $page, false otherwise
function is_current($page, $return) {
    $this_page = $_SERVER['SCRIPT_NAME']; // will return /path/to/file.php
    $bits = explode('/',$this_page);
    $this_page = $bits[count($bits)-1]; // will return file.php, with parameters if case, like file.php?id=2
    $bits = explode('?',$this_page);
    $this_script = $bits[0]; // will return file.php, no parameters
    return ($page == $this_script?$return:false); // return $return if this is $page, false otherwise
}

CSS

/* blue, no underline when normal */
a {
    text-decoration: none;
    color: #00f;
}
/* red, underlined when class active */
a.active {
    text-decoration: underline;
    color: #f00;
}

Your file

<!-- Simply echo the function result for each link class -->
<a href="home.php" class="<?php echo is_current('home.php','active'); ?>">Home</a>
<a href="about.php" class="<?php echo is_current('about.php','active'); ?>">About</a>

Answer 3

Assuming you mean "When the user is viewing the page corresponding to the link" (as opposed to "When the user has pressed the mouse button over the link but not yet released it"):

Include a class in the link (such as current) and then use it in your selector. Add the class into the HTML of the page before serving it to the user, having a server side process do this is usually the best method.