Jak zmienić kolor hiperłącza na oryginalny kolor po kliknięciu innego łącza? hiperłącza są kierowane na tę samą stronę.zmiana koloru hiperłącza podczas kliknięcia innego hiperłącza
prosimy o zaznaczenie tego DEMO
z powyższym przykładzie widać, że kiedy kliknięcie jabłko następnie kliknij winogronowy/banana .. oba stają się tym samym kolorze, ponieważ (odwiedził). Jak zrobić to tylko 1 kolor (zielony), gdy którykolwiek z linków są kliknięciu
Można to zrobić za pomocą 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>jakiejkolwiek innej metody poza jquery? – user3835327
Myślę, że w CSS nie ma lepszego rozwiązania jak jQuery, ale w selektorach CSS ': active' i': focus' dajemy ograniczone rozwiązanie. –
Podczas definiowania wszystkie 4 stany, ty należy je zdefiniować w tej kolejności:
To rozwiązuje około połowa problemu.
a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: green; }
Druga połowa, pozostawiając linki w kolorze, aż klikniesz coś innego, jest trudniejsza. Nie ma wbudowanego stanu dla niczego wcześniej klikniętego, więc zróbmy to.
Po pierwsze, potrzebujemy do tego jQuery, więc zaimportujmy ją (przez Google). To idzie w nagłówku HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
W jfiddle, dodasz ten wybierając jQuery 2.1.4 z menu po lewej stronie zamiast.
Możemy następnie dodać klasę do linków, jeśli są one ostatnią klikniętego linku dostarczając ten JavaScript:
$(function(){
$('a').click(function(){
$('a.lastclicked').removeClass('lastclicked'); //remove class from previous link
$(this).addClass('lastclicked'); //add class to newly clicked link
});
});
Wreszcie niech dostosować CSS zrobić kolorystyka:
a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: green; }
a.lastclicked { color: green; }
Jeśli chcesz, aby kolor aktywowania został zastosowany również do ostatniego klikniętego linku, możesz dodać tę linię:
a.lastclicked:hover { color: red; }
Wszystko to można zobaczyć w akcji in a Fiddle here.
Spróbuj tego (Czy kopiuj-wklej):
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>
styl.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;
}
można użyć 'a: active {color: green}' i zachować niebieski na odwiedzanej – Fahad
Nie możesz tego zrobić całkowicie czysto z CSS, najlepiej można uzyskać, jeśli przekierować cel być tym samym, co kliknięty element. [Like so] (http://jsfiddle.net/9ncnrwxq/7/), chociaż tracisz możliwość przejścia do docelowej lokalizacji. W przeciwnym razie musisz użyć JavaScript. –