如何给活动菜单项不同的样式

Question

我的菜单是一堆链接，然后我使用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技巧？

Answer 1

CSS技巧是

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

：hover 和：已访问

相同 祝你好运！

修改

现在看到您希望链接到您所使用的页面的样式不同，我需要更多详细信息。你用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>

Answer 2

假设您的意思是“当用户正在查看与该链接相对应的页面时”（而不是“当用户在链接上按下鼠标按钮但尚未释放它时”）：

在链接中包含一个类（例如current），然后在选择器中使用它。在将该类提供给用户之前将该类添加到页面的HTML中，具有服务器端进程这通常是最好的方法。

Answer 3

可以使用CSS的:active伪类：

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