jq 添加删除class
- PHP中文网Original
- 2016-05-25 17:05:011118Durchsuche
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>Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：PHP截取字符串Nächster Artikel：json_encode 编码,对中文友好.