JQuery 添加和删除class_jquery 增加删除 class-CSDN博客

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQ添加删除样式</title>
<script type="text/javascript" src="skin/wo108/js/jquery.js"></script>

<style>
* { margin:0; padding:0; }
ul, li { list-style: none; }
/*IE6/7/8*/
.clear { zoom:1; }
/*非IE*/
.clear:after { content:""; height:0; visibility:hidden; clear:both; display:block; }
.abc { color: #FFF; background: #F00; }
a { text-decoration: none; }
#nav ul li { float: left; height: 25px; width: 80px; text-align: center; display: block; }
#nav1 ul li { float: left; height: 25px; width: 80px; text-align: center; display: block; }
</style>
<script type="text/javascript">
//效果1
$(function(){
    $("#nav ul > li").click(function(){
        $(this).addClass("abc").siblings().removeClass("abc");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单

//效果2
$(function(){
    $("#nav1 a").click(function(){
        $(this).addClass("abc").siblings().removeClass("abc");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单

//效果3
$(function(){
    $("nav a").click(function(){
        $(this).addClass("home").siblings().removeClass("home");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单
</script>

</head>

<body>
<div id="nav">
  <ul>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <li><a href="#">此处显示</a></li>
    <div class="clear"></div>
  </ul>
</div>
<br />
<div id="nav1">
  <ul>
    <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a>
  </ul>
</div>

</body>
</html>
//该片段来自于http://outofmemory.cn