Question

我正在尝试将当前“活动”链接设置为白色，以显示用户所在的页面。我在上一篇文章中看到了 “链接仅在点击时占用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>

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

此致

拉里

Answer 1

您需要更新导航的html，以包含“当前”/“有效”页面的标识符。这意味着要更新您的.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”。有任何想法吗？谢谢。拉里

CSS ul.topnav li a：active

2 个答案: