Question

我有如下菜单

<ul>
    <li><a href="index.php">Home</a></li>
</ul>

当我访问该页面时如何使其处于活动状态。我尝试如下但没有运气

#navigation a:active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

我是新网站感谢任何建议

Answer 1

在您的代码中添加ID，如下所示

更新

<div id="menu">
  <ul>
    <li id="myHome"><a href="index.php">Home</a></li>
  </ul>
</div>

将脚本写为下面

<script>
  window.onload = menuSelect('myHome');
</script>

Answer 2

每个页面都有一个标识它的body标记：

主页的身体：

<body class="home">
<ul>
    <li><a href="index.php" class="home">Home</a></li> //Each navigation item also includes a class identifying that particular link.
    <li><a href="aboutUs.php" class="aboutUs">About Us</a></li>
</ul>
</body>

关于我们的身体页面

<body class="aboutUs">
<ul>
    <li><a href="index.php" class="home">Home</a></li>
    <li><a href="aboutUs.php" class="aboutUs">About Us</a></li>
</ul>
</body>

然后，您在CSS中定位这些类，为当前页面定义不同的状态：

CSS STYLE：

body.home a.home, body.aboutUs a.aboutUs{
//HERE GOES YOUR CSS
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;

}

Answer 3

在index.php页面中，您需要以这种方式编辑HTML：

<ul>
    <li><a href="index.php" class="active">Home</a></li>
</ul>

在其他页面中，例如about.php，您可能会遇到以下情况：

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php" class="active">About</a></li>
</ul>

将CSS更改为.active而不是:active，因为第二个是元素状态：

#navigation a.active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

Answer 4

:active伪选择器适用于元素良好，活跃的情况，例如链接被点击时。

您需要做的是为<a>元素提供一个类属性并相应地设置样式。

Answer 5

它没有那样的工作。您需要制作自己的逻辑，以便在元素上放置一个类（或者如果它是一个静态的html页面则对其进行硬编码），如下所示：

<li class="current"><a href="index.php">Home</a></li>

然后按类分配css：

#navigation li.active a {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

如何使菜单激活

5 个答案: