- <!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" src1="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://www.codesnippet.cn/detail/181120137237.html
来源: http://www.codesnippet.cn/detail/181120137237.html