Question

每当我点击链接时，它应该变为绿色，表明您在该页面上，所有其他链接应该是蓝色的，直到选择了新链接，然后您点击的任何链接都应该是绿色和链接你刚才应该变蓝，但截至目前，所有链接都会保持绿色，即使选择了一个新页面。

这是我的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:joshua392141@aol.com">joshua392141@aol.com</a>
</div>
</div>
</div>
</body>


</html>

Answer 1

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

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

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

Answer 2

首先，忘记使用: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等服务器端语言完成。

导航链接不会变回原始颜色

2 个答案: