CSS导航栏当前/活动颜色链接

First homepage. Nav bar color for current page isn't working. Suggestions? CSS below. Thanks.

第一个主页。当前页面的导航栏颜色不起作用。建议？ CSS下面。谢谢。

HTML

<ul class="nav">
    <li><a href="Turf.html">HOME</a></li>
    <li><a href="Turf2.html">PRODUCTS</a></li>
    <li><a href="Turf3.html">STAFF</a></li>
    <li><a href="Turf4.html">LINKS</a></li>
    <li><a href="Turf5.html">CONTACT</a></li>
</ul>

CSS

.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:20;
padding:0;
text-align:center;
font-family:sans-serif;
}

.nav li{
display:inline-block;
color:#493D26;
font-size: 15px;
font-family:sans-serif;
}

.nav a{
display:inline-block;
border-width:1px 0;
padding:15px;
text-decoration:none;
color:#493D26;
font-size: 17px;
font-style:bold;
text-transform:capitalize;    
}

ul.nav a:hover{ 
color: #6CBB3C; 
}

ul.nav a:current{
color: #6CBB3C;
}

4 个解决方案

#1

You can use this css code also.

您也可以使用此css代码。

a:active : when you click on the link and hold it (active!). a:visited : when the link has already been visited.

a：活动：当您单击链接并按住它时（活动！）。 a：已访问：链接已被访问时。

If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -

如果您希望突出显示与当前页面对应的链接，您可以为链接定义一些特定样式 -

ul.nav a:visited {
color: #6CBB3C;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).

仅在服务器端或客户端（使用javascript）将此新类添加到相应的li（链接）。

#2

check the snippet..

检查片段..

.nav {
  border: 1px solid #ccc;
  border-width: 1px 0;
  list-style: none;
  margin: 20;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
}
.nav li {
  display: inline-block;
  color: #493D26;
  font-size: 15px;
  font-family: sans-serif;
}
.nav a {
  display: inline-block;
  border-width: 1px 0;
  padding: 15px;
  text-decoration: none;
  color: #493D26;
  font-size: 17px;
  font-style: bold;
  text-transform: capitalize;
}
ul.nav a:hover {
  color: #6CBB3C;
}
ul.nav a:visited {
  color: #6CBB3C;
}

<ul class="nav">
  <li><a href="#">HOME</a>
  </li>
  <li><a href="Turf2.html">PRODUCTS</a>
  </li>
  <li><a href="Turf3.html">STAFF</a>
  </li>
  <li><a href="Turf4.html">LINKS</a>
  </li>
  <li><a href="Turf5.html">CONTACT</a>
  </li>
</ul>

#3

Oh dear..

噢亲爱的..

Try .nav ul instead of ul.nav :)

试试.nav ul而不是ul.nav :)

#4

You can use jQuery trick:

你可以使用jQuery技巧：

You should add jQuery library file fist:

你应该添加jQuery库文件：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("ul.nav li a").each(function()
    {
        if(this.href==window.location.href)
        {
            $(this).addClass('current');
            $(this).removeAttr('href');
        }
    });
});
</script>

and add this css:

并添加此css：

ul.nav a.current{
    color: #6CBB3C;
}

#1