jq 添加删除class
程序员文章站
2022-05-07 11:22:57
...
php代码
<!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?1.1.9"></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> <p 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> <p class="clear"></p> </ul> </p> <br /> <p id="nav1"> <ul> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> <a href="#">此处显示</a> </ul> </p> </body> </html>
推荐阅读
-
mysql为字段添加和删除唯一性索引(unique) 的方法
-
android如何添加桌面图标和卸载程序后自动删除图标
-
vue 对象添加或删除成员时无法实时更新的解决方法
-
Edius视频中添加的滤镜怎么去掉? Edius删除滤镜的教程
-
jQuery实现动态添加和删除input框代码实例
-
AE关键帧在哪里? ae关键帧的添加删除方法
-
linux删除用户组和inux添加用户组 linux删除用户命令
-
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
-
win10添加删除输入法在哪设置 win10添加删除输入法的方法
-
浅析使用JDBC操作MySQL需要添加Class.forName("com.mysql.jdbc.Driver")