jq 添加删除class-PHP源码-PHP中文网

首页

php教程

PHP源码

jq 添加删除class

PHP中文网

May 25, 2016 pm 05:05 PM

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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn