jquery destacar o link quando clicado
Pergunta
Como eu uso jQuery para realçar o link, quando eu clicar sobre ele?
Por exemplo, quando eu clico no link class1_1, eu quero fazer este link vermelho (ou outra cor).
O código javascript aqui:
<script type="text/javascript">
$(function(){
$("#menu li").each(function(){
$(this).click(function(event){
var ul=$(this).children("ul")
var span = $(this).children("span")
if(ul.html()!=null)
{
if(ul.css("display")=="none")
{
ul.css("display","block");
span.addClass("up")
}else
{
ul.css("display","none")
span.removeClass("up")
}
event.stopPropagation();
}else
{
event.stopPropagation();
}
});
});
return false;
});
</script>
O código html aqui:
<ul id="menu">
<li class="title"><span>class1 </span>
<ul>
<li><a href="">class1_1</a></li>
<li><a href="">class1_2</a></li>
</ul>
</li>
<li class="title"><span>class2</span>
<ul>
<li><span>class2_1</span>
<ul>
<li><a href="">class2_1_1</a></li>
<li><a href="">class2_1_1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
talvez eu não posso explicar minha pergunta claramente, eu quero dizer é o último onclick ligação make it
cor para vermelho e mais ligações definidas para lá cor padrão
Solução 5
<script type = "text/javascript" >
$(function() {
$("#menu li").each(function() {
$(this).click(function(event) {
$("#menu li").removeClass("high");
$(this).addClass("high");
var ul = $(this).children("ul")
var span = $(this).children("span")
if (ul.html() != null) {
if (ul.css("display") == "none") {
ul.css("display", "block");
span.addClass("up")
} else {
ul.css("display", "none") span.removeClass("up")
}
event.stopPropagation();
} else {
event.stopPropagation();
}
});
});
return false;
});
</script>
<style>
.high{color:red}
</style>
Outras dicas
É possível usar o CSS, não jQuery necessário:
Destaque:
a:active {
background-color: #FF0000;
}
Alterar cor do link:
a:active {
color: #FF0000;
}
Edit: Respondendo ao seu comentário ... Se os seus links não estão direcionando o navegador para outra página, você pode usar resposta de Mike Robinson para realizar o mesmo efeito sem sair da página e sem alterar a volta da cor para o padrão onblur.
acho que isso deve fazê-lo, embora eu não tenho jquery na mão agora. Assume 'up' é uma classe que faz o seu link Vermelho:
$("ul#menu a").click(function(){
$(this).addClass('up');
});
Isso deve funcionar:
Javascript:
$(function(){
$('.class1').click(function() {
$(this).toggleClass('active1');
});
});
CSS:
a.class1 { color: red; }
a.active1 { color: blue; }
HTML:
<a href="#" class="class1">some text</a>
Seu melhor usar toggleClass (2 em 1) em vez de addClass / removeClass.
Eu recomendaria o http://plugins.jquery.com/project/color plug-in jquery.color. Ele permitirá que você animar cor em todos os tipos de elementos HTML.
Javascript:
$('.link').click(function() {
if (!$(this).hasClass('hi')) {
// If this link is not already highlighted, highlight it and make
// sure other links of class .link are not highlighted.
$('.hi').removeClass('hi');
$(this).addClass('hi');
}
});
css:
a.hi { color: red; }
html:
<a href="#" class="link">my text</a>
<a href="#" class="link">that text</a>
<a href="#" class="link">this text</a>
Você pode fazer isso usando o CSS pseudo-classe ativa . Ele adiciona um estilo especial a um elemento activado.
Por exemplo, você pode fazer isso:
a: active { color: red; }
Tenha cuidado, uma: MUST ativa vir após a: hover na definição CSS, a fim de ser eficaz !!