0

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

这是我的 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>
4

2 回答 2

0

首先，完全忘记使用: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-20T19:15:08.103 回答
0 
#left a:visited { background-color: #48751A; }

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

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

于 2013-03-20T18:51:40.670 回答