添加删除class代码,JS代码库,德仔网

代码语言

代码分类

【JS】添加删除class

作者:likk / 发布于2013/6/4/ 802


	<!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>
	
	<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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　添加删除class　

同语言下

可能有用的

likk贡献的其它代码(1)

.添加删除class