Question

HTML：

<div id="nav_item" style="overflow:visible;">
      <nav>
      <ul>
        <li><a href="./index.php">HOME</a></li>
        <li><a href="./About_us.php">ABOUT US</a></li>
        <li><a href="./contact_us.php">CONTACT US</a></li>
        <li><a href="./feedback.php">YOUR FEEDBACK</a></li>
      </ul>
      </nav>

</div>

如何更改当前链接的字体颜色（假设我打开＆＃34; About_us.php＆＃34;）？

Answer 1

我不知道您是否为每个网站使用常规菜单文件，或者您是否在每个页面中都对此菜单进行了硬编码，但是如果菜单编码到每个页面单独：

您可以使用.active CSS类而不是:active选择器。据我所知，它需要一些配置，以便网站识别您所在的页面，或者至少我还没有在我的旧项目中工作，因为我没有使用我的框架页。

CSS：

.active {
   color: #ff0000;
}

HTML：

<div id="nav_item" style="overflow:visible;">
  <nav>
  <ul>
    <li><a href="./About_us.php" class="active">HOME</a></li>
    <li><a href="./About_us.php">ABOUT US</a></li>
    <li><a href="./contact_us.php">CONTACT US</a></li>
    <li><a href="./feedback.php">YOUR FEEDBACK</a></li>
  </ul>
  </nav>
</div>

完成这些操作后，您可以将class功能更改为其他页面。当您进入首页时，此示例将起作用。只需将课程移至另一页的另一个链接即可。

这是一种简单的方法，虽然它不是一般建立网站的简单方法。

Answer 2

   a:active
    {
      color: #ff0000;
    }

DEMO HERE

Answer 3

试试这个

a:active
{ 
   color:yellow;
}
/* for visited */
a:visited { 

   color: red;

}

<div id="nav_item" style="overflow:visible;">
      <nav>
      <ul>
        <li><a href="./About_us.php">HOME</a></li>
        <li><a href="./About_us.php">ABOUT US</a></li>
        <li><a href="./contact_us.php">CONTACT US</a></li>
        <li><a href="./feedback.php">YOUR FEEDBACK</a></li>
      </ul>
      </nav>

</div>

Answer 4

你做错了。：active是一个选择器，当css检测到点击时会触发该选择器。如果将样式应用于：活动选择器，则单击该对象时将显示这些样式。（尝试单击并按住，然后您将看到已应用的样式）

要突出显示当前页面，您需要做的是将一个类添加到当前页面并将自定义样式添加到该类。看这个演示。 http://codepen.io/anon/pen/MYYWjM

HTML应该是这样的

<a href="#">Click here and hold to see the :active<a>
<br><br>
<a class="active" href="#">This is blue by default</a>

和CSS

a:active {color: red;}
a.active {color: blue;}

PS - 不，没有捷径。必须添加课程。而且你必须弄清楚要自动添加类的东西:) 既然你已经问过这个问题，你最好试试w3schools，codeacadamy等来提高你的知识水平。你会在网上找到一些很好的教程。

如何更改当前链接的字体颜色

4 个答案: