Как я могу изменить свой цвет гиперссылки на исходный цвет при нажатии на другую ссылку? гиперссылки нацелены на одну и ту же страницу.изменить цвет гиперссылки при нажатии другой гиперссылки
пожалуйста, проверьте этот DEMO
из приведенного выше примера можно увидеть, что, когда нажмите яблоко затем нажмите виноградный/банан .. оба становятся такой же цвет, потому что (побывал). Как сделать это только 1 цвет (зеленый), когда какой-либо из звеньев щелкнул
Вы можете сделать это с помощью jQuery
$('body a:link').click(function()
{
\t $('body a').removeClass('active');
\t $(this).addClass('active'); \t
});a:link {
color: blue;
}
/* visited link */
a.active {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="fruit" href="#apple">apple</a></span>
<a class="fruit" href="#grape">grape</a></span>
<a class="fruit" href="#banana">banana</a></span>
<div style="height:500px"></div>
<a name="apple"> apple here</a>
<a name="grape"> grape here</a>
<a name="banana"> banana here</a>любой другой метод, кроме jquery? – user3835327
Я думаю, что в CSS нет лучшего решения, такого как jQuery, но в селекторах CSS::. –
Когда вы определяете все 4 состояния, вы следует определить их в таком порядке:
Это фиксирует примерно половину вашей проблемы.
a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: green; }
Другая половина, оставляя ссылки цветными, пока вы не нажмете что-нибудь еще, сложнее. Нет встроенного состояния для ранее нажатого что-либо, поэтому давайте сделаем это.
Во-первых, для этого нам понадобится jQuery, поэтому давайте импортируем его (через Google). Это идет в голове вашего HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
В jfiddle, добавьте это, выбрав JQuery 2.1.4 из выпадающего списка слева вместо этого.
Затем мы можем добавить класс ссылки, если они последний Clicked ссылку, предоставляя эту JavaScript:
$(function(){
$('a').click(function(){
$('a.lastclicked').removeClass('lastclicked'); //remove class from previous link
$(this).addClass('lastclicked'); //add class to newly clicked link
});
});
Наконец, давайте настроить CSS, чтобы сделать окраску:
a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: green; }
a.lastclicked { color: green; }
Если вы хотите, чтобы цвет наведения был применен и к последней нажатой ссылке, вы можете добавить эту строку:
a.lastclicked:hover { color: red; }
Вы можете увидеть все это в действии in a Fiddle here.
Попробуйте это (Do копирования и вставки):
test.html: -
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<a class="fruit" href="#">apple</a></span>
<a class="fruit" href="#">grape</a></span>
<a class="fruit" href="#">banana</a></span>
<div style="height:500px"></div>
<a name="apple"> apple here</a>
<a name="grape"> grape here</a>
<a name="banana"> banana here</a>
</html>
стиль.CSS: -
a:link{
color:blue;
}
a:visited{
color:purple;
}
a:hover{
color:orange;
}
a:focus{
color:green;
}
a:active{
color:red;
}
a:active{
color:yellow;
}
вы можете использовать 'а: активный {цвет: зеленый}' и держать синий на посещаемой – Fahad
Вы не можете сделать это совершенно чисто с помощью CSS, то лучшее, что вы можете получить, если вы перенаправлять цель быть таким же, как щелчком. [Like so] (http://jsfiddle.net/9ncnrwxq/7/), хотя вы теряете функциональность перехода в целевое местоположение. В противном случае вам нужно использовать JavaScript. –