0

リンクをクリックするたびに、そのページにいることを示す緑色に変わります。他のすべてのリンクは、新しいリンクが選択されるまで青色であるはずです。その後、クリックしたリンクは緑色であるはずです。で青に変わるはずですが、今のところ、新しいページを選択した後でもすべてのリンクは緑のままです。

これは私の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 
#left a:visited { background-color: #48751A; }

これにより、アクセスしたリンクが緑色になります。サイトを再度閉じると、ブラウザの履歴に残っているため、リンクが緑色に表示されます。

ページを閉じたときに色を再び青に戻したい場合は、javascript/jQuery を使用する必要があります。css/htmlだけでは無理だと思います。

于 2013-03-20T18:51:40.670 に答える
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 に答える