CSS ul.topnav li a:active

Question

我正在尝试将当前的"活动"链接设置为White，以显示用户打开的页面。我在上一篇文章中看到"链接仅在单击时占用A：活动状态，因此您只会看到更改几秒钟。您应该寻找一种将其完成的方法，例如为所选菜单项添加新的CSS类从您的服务器端脚本。"问：我该怎么做？

我的CSS是：

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}
ul.topnav li {
  float: left;
}
ul.topnav li a:link {
  color: black;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  font-size: larger;
  font-family: Arial;
  font-weight: bold;
}
.topnav ul li.current a {
  color: Black;
}
/*
ul.topnav li a:visited {
	color: black;
}
*/
ul.topnav li a:hover:not(.active) {
  color: Aqua;
  text-decoration: none;
  transition: none;
}
l.topnav li a:hover:active {
  color: white;
  text-decoration: underline;
}
ul.topnav li a:active {
  color: white;
  transition: none;
  text-decoration: underline;
}

<ul class="topnav">
  <!--<li><a class="active" href="../index.html">HOME</a></li>-->
  <li> <a href="../index.html">HOME</a></li>
  <li> <a href="../Aboutus.html">ABOUT</a></li>
  <li> <a href="../new.html">NEW</a></li>
  <li> <a href="../Samples.html">PRODUCTS</a></li>
  <li> <a href="../catalog.html">CATALOG</a></li>
  <li> <a href="../search.html">SEARCH</a></li>
  <li> <a href="../distributors.html">DISTRIBUTORS</a></li>
  <li> <a href="../service.html">SERVICE</a></li>
  <li> <a href="../Mailto.html">CONTACT</a></li>
</ul>

我希望这些信息会有所帮助。一直试图解决此问题。

问：

larry

Answer 1

您需要更新导航的HTML，以包括"当前"/" Active"页面的标识符。这意味着更新您的.html页面，以将class="active"之类的内容添加到代表当前页面的链接中。然后，您将将CSS更新为以下内容：

ul.topnav li a:hover:not(.active) {
    color: Aqua;
    text-decoration: none;
    transition: none;
}
ul.topnav li a.active:hover,
ul.topnav li a.active {
    color: white;
    transition: none;
    text-decoration: underline;
}

Answer 2

我能够使用JavaScript解决设置活动链接"白色"和不活动的"黑色"的问题。您可以在此处看到结果：http：//www.nav-aids。com/new-navaids/index.html

我的菜单设置为：

  	<div class="col-7 col-m-7">
          <ul class="topnav">
 		 <li> <a id="index"  href="../index.html">HOME</a></li>
		  <li> <a id="about"  href="../Aboutus.html">ABOUT</a></li>
		  <li> <a id="new1" href="../new.html">NEW</a></li>
		  <li> <a id="products" href="../Samples.html">PRODUCTS</a></li>
		  <li> <a id="catalog" href="../catalog.html">CATALOG</a></li>
		  <li> <a id="search1" href="../search.html">SEARCH</a></li>
		  <li> <a id="distributors" href="../distributors.html">DISTRIBUTORS</a></li>
		  <li> <a id="service" href="../service.html">SERVICE</a></li>
		  <li> <a id="contact" href="../Mailto.html">CONTACT</a></li>
        </ul>
  </div>
    <div class="col-2 col-m-2">
   	  <div></div>
    </div>   
        </td>      
  </tr> 
</table> 
</div>
<!-- set active menu item to white, inactive to black --> 
<script language="JavaScript" type= "text/javascript">
	menuactive()
 </script>

我的JavaScript是：

/* set menu button to white when selected and black if not selected */
function menuactive() {
/* The javascript below returns the menu page name in sPath */
var sPath = window.location.pathname;
//var sPage = sPath.substring(sPath.lastIndexOf('\') + 1);
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
/* alert below used to verify which menu page selected */
/*alert(sPage);*/
if (sPage == "index.html") {
	var x = document.getElementById("index");
    x.style.color = "white";
} else {	
	var x = document.getElementById("index");
    x.style.color = "black";
}
if (sPage == "Aboutus.html") {	
	var x = document.getElementById("about");
    x.style.color = "white";
} else {	
	var x = document.getElementById("about");
    x.style.color = "black";
}
if (sPage == "new.html") {
	var x = document.getElementById("new1");
    x.style.color = "white";
} else {
	var x = document.getElementById("new1");
    x.style.color = "black";
}
if (sPage == "Samples.html") {
		var x = document.getElementById("products");
    x.style.color = "white";
} else {
	var x = document.getElementById("products");
    x.style.color = "black";
}
if (sPage == "catalog.html") {
	var x = document.getElementById("catalog");
    x.style.color = "white";
} else {
	var x = document.getElementById("catalog");
    x.style.color = "black";
}
if (sPage == "search.html") {
	var x = document.getElementById("search1");
    x.style.color = "white";
} else {
	var x = document.getElementById("search1");
    x.style.color = "black";
}
if (sPage == "distributors.html") {
	var x = document.getElementById("distributors");
    x.style.color = "white";
} else {
	var x = document.getElementById("distributors");
    x.style.color = "black";
}
if (sPage == "service.html") {
	var x = document.getElementById("service");
    x.style.color = "white";
} else {
	var x = document.getElementById("service");
    x.style.color = "black";
}
if (sPage == "Mailto.html") {
	var x = document.getElementById("contact");
    x.style.color = "white";
} else {
	var x = document.getElementById("contact");
    x.style.color = "black";
}
}
/* End menuactive */

但是 - 我有问题。我的CSS徘徊不再起作用。我正在使用的CSS是：

ul.topnav li a:hover:not(.active) {
    color: Aqua;
    text-decoration: none;
    transition: none;
}
ul.topnav li a.active:hover,
ul.topnav li a.active {
    color: white;
    transition: none;
}

悬停的链接不会转动" Aqua"。有任何想法吗？谢谢。拉里