您的位置：首页 > Web前端 > JQuery

Jquery实现动态绑定单击时间，动态添加样式

2016-11-10 19:06 691 查看

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<style>
/*a标签样式*/
a{
float: left;
width: 50px;
height: 50px;
border:1px solid lawngreen;
margin-left: 10px;
text-align: center;
line-height: 50px;
cursor: hand;
text-decoration: none;
}
/*用来添加的样式*/
.toRed{
background-color: red;
}
</style>
<title></title>

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//Jquery实现动态绑定单击事件为节点添加样式
//HTML文档加载完之后再执行Jquery
$(document).ready(function() {
//获取是所有的a标签正常使用时建议大家为a标签写上name属性值
var aArray = $("a");
//这是遍历a标签数组，index表示a标签在aArray中的索引，element表示a标签节点本身
$(aArray).each(function(index,element){
//绑定单击事件
$(element).click(function(){
//获取已经有toRed样式的a标签节点移除toRed样式
$("a[class='toRed']").removeClass("toRed");
//为a标签添加toRed样式
$(this).addClass("toRed");
//运行前给其中一个a标签添加一个toRed样式就更完美了
});
});
});
</script>
<script>
//为什么要用$(document).ready(function() {});作用是文档加载完毕之后执行
//很多时候尤其我们绑定事件会用到文档节点,所以必须等文档节点加载完毕之后再绑定,否则就会出现明明代码没错但是就是没有效果的情况
//大家可以去搜下其他人写的博客，看看他们的实验，我就不做多的探究了
</script>
</head>
<body>


<a class="toRed" href="javascript:void(0);">1</a>
<a href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
<a href="javascript:void(0);">4</a>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航