如何指示带有链接的LI被按下

Question

我做了一个菜单，想让按下的按钮保持不同的颜色。例如，如果我在菜单页，菜单的菜单按钮将是蓝色的。

我在网上读了一些关于菜单的指南，最后得出以下结论:

<div id="menu">
<ul>
    <li>
        <a href="/index.php" >home</a>
    </li>
    <li>
        <a href="/search.php" >search</a>
    </li>
    <li>
        <a href="#">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
    <li>
        <a href="#">3</a>
    </li>
</ul></div>

CSS应该是这样的:

#menu ul li a.selected{
background:blue;
color:#000;
}

当然每个LI都有高度和一些东西，所以它有一些颜色。问题是我如何告诉HTML按钮被选中了?HTML属性之类的?

我的另一个困境是如何最好地改变这些选择?我可以使用PHP检查地址，并根据它更改所选择的。有什么建议吗?

Answer 1

你可以这样写:

<li>
<a href="/search.php" 
<?php 
    if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php")) 
      echo "class='selected'";
?>
> Home </a>
</li>

或使用Javascript等效的"document.URL"。可能不是最干净的解决方案，但应该这样做。

Answer 2

在css中使用a:visited。只有当链接在

Answer 3

css中可以使用a:visited和a:active。当你点击它时，它变成了active。如果你以前访问过它，它就变成了visited。

如果你想操作按钮，你可以考虑使用JavaScript(最好是jQuery)，然后你可以很容易地根据动作改变元素属性(例如onclick)。

Answer 4

Try:active and:focus

#menu ul li a:active,#menu ul li a:focus{
    background:blue;
    color:#000;
}