Навигационные ссылки не меняются обратно на исходный цвет

Всякий раз, когда я нажимаю на ссылку, она должна становиться зеленой, показывая, что вы находитесь на этой странице, все остальные ссылки должны быть синими до тех пор, пока не будет выбрана новая ссылка, а затем любая ссылка, на которую вы нажимаете должен быть зеленым, а ссылка, на которой вы были только что, должна стать синей, но на данный момент все ссылки будут оставаться зелеными даже после выбора новой страницы.Навигационные ссылки не меняются обратно на исходный цвет

Это мой 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» на зеленый. Пока эта ссылка была записана в истории вашего браузера, это будет тот цвет. –

Ну, я знал, что: посещение было настроено на зеленый, но как бы заставить его вести себя так, чтобы текущая ссылка была зеленой, а остальные - синими? Должен ли я каким-то образом сбросить ссылки? Как только вы выберете ссылку, она станет зеленой, а любая другая предыдущая страница, на которой вы были, должна вернуться на синий. @MikeChristensen –

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

Это делает ссылки, которые вы посетили зеленый. Когда вы снова закроете сайт, он все еще находится в истории вашего браузера, который делает ссылку по-прежнему зеленой.

Если вы хотите, чтобы цвет снова возвращался в синий цвет, как только вы закрываете страницу, вам нужно будет использовать javascript/jQuery. Я не думаю, что вы можете сделать это только с помощью css/html.

источник

2013-03-20 18:51:40 user2044453

Единственная проблема заключается в том, что им не разрешено использовать javascript/jQuery для этого. Он должен быть в HTML5 –

Во-первых, забудьте об использовании :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

Навигационные ссылки не меняются обратно на исходный цвет

ответ

Смежные вопросы