jq 添加删除class-PHP源码-php.cn

Home

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>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn