Мое меню – куча ссылок, которые я затем использую в стиле CSS как кнопки
<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> Когда элемент меню щелкнут и активен, как лучше всего его по-другому стилизовать? Я использую jquery или javascript для добавления нового класса? или есть трюк CSS для этого?
Трюк CSS
#menu a:active { color: #f00; }
То же самое для : hover и : visited
Удачи!
РЕДАКТИРОВАТЬ
Увидев теперь, что вы хотите, чтобы ссылка на страницу, на которой вы начертаны по-разному, мне нужна дополнительная информация. Вы используете PHP? Разве вы не используете один скрипт php на странице?
В любом случае, это должно сработать, если у вас есть файл header.php, который вы включаете на всех своих страницах, или просто ленивы, чтобы жестко закодировать классы для каждой ссылки.
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; }
Ваш файл
<!-- 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>
Предполагая, что вы имеете в виду «Когда пользователь просматривает страницу, соответствующую ссылке» (в отличие от «Когда пользователь нажал кнопку мыши по ссылке, но еще не выпустил ее»):
Включите класс в ссылку (например, current ), а затем используйте его в своем селекторе. Добавьте класс в HTML-страницу, прежде чем подавать его пользователю, с процессом на стороне сервера это обычно лучший метод.
Можно использовать CSS :active псевдокласс:
a.mybutton:active { /* rules */ }