JQuery 添加和删除class

来源：互联网发布：linux 修改文件名编辑：程序博客网时间：2024/05/17 02:12
!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
0 0