思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class。
具体演示如下:
1、HTML结构:设计三个li元素
2、css样式:设计一个类selected,表示选中后的效果
.selected{font-weight:bold; background: #ff99cc; color:#fff;}
3、jquery代码:
$(function(){
$("#test li").click(function() {
$(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式
$(this).addClass('selected'); // 添加当前元素的样式
});
});
4、效果演示:
JQ做的效果在当前页面,你超链接跳转刷新后,效果不在了,除非结合cookies
推荐用服务器端脚本语言来做,更加简洁
或者传递参数,或者判断文件名
另外JQ代码大致写一下,但是没效果的一点击就跳转了
$(function(){
var liobj=$("#w111 li");
liobj.each(function(){
$(this).click(function(){
liobj.removeClass("on")
$(this).addClass("on");
//return false; //加这句来阻止跳转 可用来调试效果
});
});
});
先给首页加样式on,样式名字我随便写的。