jquery выделяет ссылку при нажатии
Вопрос
Как мне использовать jquery, чтобы выделить ссылку, когда я нажимаю на нее?
Например, когда я нажимаю на ссылку class1_1, я хочу сделать эту ссылку красной (или другого цвета).
Код javascript здесь:
<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>
HTML-код здесь:
<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>
возможно, я не могу четко объяснить свой вопрос, я имею в виду, делает ли это последняя ссылка onclick
покрасить в красный, а другим ссылкам присвоить значение по умолчанию
Решение 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>
Другие советы
Это возможно с помощью CSS, jQuery не требуется:
Выделите:
a:active {
background-color: #FF0000;
}
Изменить цвет ссылки:
a:active {
color: #FF0000;
}
Редактировать:Отвечаю на ваш комментарий...Если ваши ссылки не направляют браузер на другую страницу, вы можете использовать Ответ Майка Робинсона чтобы добиться того же эффекта, не покидая страницу и не меняя цвет обратно на стандартный onblur.
Думаю, это должно сработать, хотя у меня сейчас нет jquery. Предполагается, что «вверх» - это класс, который делает вашу ссылку красной:
$("ul#menu a").click(function(){
$(this).addClass('up');
});
Это должно сработать:
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>
Лучше использовать toggleClass (2 в 1) вместо addClass / removeClass.
Я бы порекомендовал http://plugins.jquery.com/project/color . плагин jquery.color. Это позволит вам анимировать цвет на все виды 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>
Вы можете сделать это, используя псевдокласс CSS active . Он добавляет особый стиль к активированному элементу.
Например, вы можете сделать это:
a: active { color: red; }
Будьте осторожны, a: active ДОЛЖЕН следовать за: hover в определении CSS, чтобы быть эффективным !!