导航链接不会改回原来的颜色

每当我点击一个链接时，它应该变成绿色，表明你在该页面上，所有其他链接应该是蓝色的，直到选择一个新链接，然后点击你点击的任何链接应该是绿色的，你刚才的链接应该变成蓝色，但截至目前，即使在选择新页面后，所有链接仍然保持绿色。导航链接不会改回原来的颜色

这是我的CSS页面：

body{ 
background-color:#ffffcc; 
color:#003300; 
font-family:arial,helvetica,sans-serif; 
background:url(images/primehorizontal.png); 
} 
h2{ 
color:#003366; 
} 
h3{ 
color:#006600; 
padding-top:10px; 
} 
dd{ 
font-style:italic; 
font-size:.90em; 
line-height:200%; 
} 
#header{ 
color:#48751A; 
} 
.nav{ 
font-weight:bold; 
font-size:1.2em; 
} 
.contact{ 
font-weight:bold; 
font-size:.90em; 
font-family:"Times New Roman",helvetica,serif; 
} 
#footer{ 
font-size:.60em; 
font-style:italic; 
clear:both; 
} 
#wrapper{ 
width:80%; 
margin-right:auto; 
margin-left:auto; 
background-color:#ffffcc; 
min-width:700px; 
padding:0px 0px 20px 30px; 
border:1px ridge #00332B; 
border-radius:15px; 
-webkit-box-shadow: inset -3px -3px 3px 3px #00332B; 
-moz-box-shadow: inset -3px -3px 3px 3px #00332B; 
box-shadow: inset -3px -3px 3px 3px #00332B; 
} 
img{ 
border-style:none; 
} 
#left{ 
float:left; 
width:150px; 
} 
#right{ 
margin-left:180px; 
padding: 0 20px 20px 0; 
} 
#left ul{ 
list-style-type: none; 
margin: 0; 
padding-left: 0; 
} 
#left a{ 
text-decoration: none; 
display: block; 
text-align: center; 
color: #FFFFCC; 
border: 3px outset #CCCCCC; 
padding: 5px; 
} 

#left a:visited { background-color: #48751A; } 
#left a:link { background-color: #003366; } 
#left a:hover { border:3px inset #333333; } 

.floatleft{ 
float:left; 
padding:0 20px 20px 0; 
} 
.clear{ 
clear:left; 
}

这里是我的索引页：

<!DOCTYPE html> 
<html lang="en"> 

<head> 

<title> Prime Properties</title> 

<meta charset="utf-8"> 

<link rel="stylesheet" href="prime.css"> 

</head> 

<body> 

<div id="wrapper"> 

<h1 id="header"><img src="images/primelogo.gif" alt="prime logo" height="100" width="650"></h1> 

<div id="left"> 

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="listings.html">Listings</a></li> 
    <li><a href="financing.html">Financing</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul> 

</div> 

<div id="right"> 

<p>Prime Properties is prepared to market and sell your property.</p> 
<p>The philosophy of Prime Properties is to promote our clients, not ourselves.</p> 
<p>We can also help you find the property that meets your needs:</p> 

<ul> 
    <li>location</li> 
    <li>price</li> 
    <li>features</li> 
</ul> 

<br> 

<div class="contact">Prime Properties<br> 
3055 Bode Road<br> 
Schaumburg, IL 60194<br> 
<br> 
847-555-5555<br> 

<br> 

</div> 


<div id="footer"> 

<div class="nav"> 

<a href="index.html">Home</a>&nbsp;&nbsp; 
<a href="listings.html">Listings</a>&nbsp;&nbsp; 
<a href="financing.html">Financing</a>&nbsp;&nbsp; 
<a href="contact.html">Contact</a> 

</div> 


Copyright &copy; 2013 Prime Properties 

<br> 

<a href="mailto:[email protected]">[email protected]</a> 
</div> 
</div> 
</div> 
</body> 


</html>

来源

2013-03-20 Josh Marker

访问过的链接是绿色的，因为您将'a：visited'设置为绿色。只要该链接记录在浏览器的历史记录中，就会是那种颜色。 – 2013-03-20 18:22:05

嗯，我知道一个：访问被设置为绿色，但我怎么会得到它的行为，使当前链接你是绿色的，而其余的蓝色？我必须以某种方式使链接重置？一旦你选择一个链接，它应该变成绿色，而你以前的任何其他页面应该变回蓝色@MikeChristensen – 2013-03-20 18:54:20

#left a:visited { background-color: #48751A; }

这使得已访问链接的绿色。当您再次关闭该网站时，它仍在您的浏览器历史记录中，这会使链接仍显示为绿色。

如果您希望颜色在关闭页面后再次回到蓝色，您将不得不使用javascript/jQuery。我不认为你可以单独用css/html做到这一点。

来源

2013-03-20 18:51:40 user2044453

唯一的问题是，我不允许使用javascript/jQuery。它必须全部在HTML5中 – 2013-03-20 19:07:46

首先，忘记使用:visited。它不会做你认为应该做的事。

您可能需要编辑每个页面并为当前链接添加一个选择器。例如，index.html会是什么样子：

<a class="current" href="index.html">Home</a>&nbsp;&nbsp; 
<a href="listings.html">Listings</a>&nbsp;&nbsp; 
<a href="financing.html">Financing</a>&nbsp;&nbsp; 
<a href="contact.html">Contact</a>

Listings.html会是什么样子：

<a href="index.html">Home</a>&nbsp;&nbsp; 
<a class="current" href="listings.html">Listings</a>&nbsp;&nbsp; 
<a href="financing.html">Financing</a>&nbsp;&nbsp; 
<a href="contact.html">Contact</a>

然后，在你的CSS你必须：

a.current { color: green; }

这也与完成像PHP或ASP.NET这样的服务器端语言。

来源

2013-03-20 19:15:08

导航链接不会改回原来的颜色

回答

相关问题