如何赋予活动菜单项不同的样式答案

【问题标题】：How to give active menu item different styling如何赋予活动菜单项不同的样式
【发布时间】：2011-04-23 05:27:51
【问题描述】：

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

【问题讨论】：

标签： php javascript jquery css

【解决方案1】：

可以使用CSS的:active伪类：

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

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

你能给我一个简单的代码示例吗？我是否使用 JQuery 添加当前类，以及我如何仍然需要在我的 css 中使用 #menu a:active {} 之类的东西？
正如我所说，它应该在服务器端完成。具体取决于您使用的服务器端语言。选择器将更像#menu a.current。
我现在明白了。我在想同样的事情，一旦点击实际指向该页面，活动状态就不会持续存在。那么如何有条件地使用 PHP 添加当前类？