如何使用 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 链接成功了
颜色为红色,另一个链接设置为默认颜色
可以使用 CSS,不需要 jQuery:
亮点:
a:active {
background-color: #FF0000;
}
更改链接颜色:
a:active {
color: #FF0000;
}
编辑:回应您的评论...如果您的链接没有将浏览器引导到另一个页面,您可以使用Mike Robinson的答案来完成相同的效果,而无需离开页面,也不会将颜色更改回默认的onblur。
认为这应该可以做到,尽管我现在手头没有jquery。假设“up”是一个使您的链接变成红色的类:
$("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 元素设置颜色动画。
<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>
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; }
请注意,CSS 定义中 a:active 必须位于 a:hover 之后才能生效!!
var base = window.location.pathname.substring(1);
var links="";
$('a').click(function(){
links = $(this).attr('href');
localStorage.setItem(base, links);
});
$('a[href="'+localStorage.getItem(base)+'"]').focus();