JavaScript与jQuery关于鼠标点击事件
2024-09-30 10:41:48
即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式。
用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有sibling()方法,可以直接使其同胞元素取消样式,而JavaScript需要使用循环来使其上一菜单样式取消,当前菜单加上样式。
实现代码:
1.JavaScript:
当点击当前菜单时,上一菜单样式取消,当前菜单增加该样式,为了下一菜单的实现,须将:onum = this;将当前li对象赋予onum。
this相当于是当前li对象。
<script>
var arr = document.getElementsByTagName("li");
var i,num = 0;
onum = arr[num]; for(i in arr){
arr[i].onclick = function(){
onum.className = ' ';
this.className = "active";
onum = this;
}
} </script>
2.jQuery:
使用sibling()方法来使当前元素的同胞元素都取消该样式。
this表示当前元素。
<script>
$("li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
如此看来,jQuery是要比JavaScript简便一些,但jQuery思想还是使用的JavaScript思想,并未改变。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0px;margin:0px;
list-style:none;
}
.box{
width: 400px;
height: 50px;
background-color: antiquewhite;
}
.box ul li{
height: 50px;
width: 25%;
line-height: 50px;
display: block;
float: left;
text-align: center;
}
ul li:hover{
cursor: pointer;
}
.active{
background:red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var arr = document.getElementsByTagName("li");
var i,num = 0;
onum = arr[num]; for(i in arr){
arr[i].onclick = function(){
onum.className = ' ';
this.className = "active";
onum = this;
}
} </script>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0px;margin:0px;
list-style:none;
}
.box{
width: 400px;
height: 50px;
background-color: antiquewhite;
}
.box ul li{
height: 50px;
width: 25%;
line-height: 50px;
display: block;
float: left;
text-align: center;
}
ul li:hover{
cursor: pointer;
}
.active{
background:red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var arr = document.getElementsByTagName("li");
var i,num = 0;
onum = arr[num]; for(i in arr){
arr[i].onclick = function(){
onum.className = ' ';
this.className = "active";
onum = this;
}
} </script>
</body>
</html>
jQuery
注意:
在jQuery使用时需要引入本地库文件,或者使用那个网址也可以
最新文章
- Java 社区论坛 - Sym 1.6.0 发布
- C#常用操作类库四(File操作类)
- 移动web
- SQL2008无法连接到.\SQLEXPRESS,用户&#39;sa&#39;登录失败(错误18456)图文解决方法
- ScrollView嵌套StackView提示需要宽度和高度限制
- PS基础学习 1---基本工具
- 《Braid》碎片式台词
- Java——(二)Java集合容器
- css样式之背景图片
- Spring、Bean 的作用域
- Hive 入门(转)
- Java之IO转换流
- 集合点(lr_rendezvous)
- Python----数据预处理
- poi 导入Excle
- 【转载】关于在centos下安装python3.7.0以上版本时报错ModuleNotFoundError: No module named &#39;_ctypes&#39;的解决办法
- lua 语法的使用总结
- Struts2 学习
- IntelliJ IDEA 2017版 spring-boot 拦截器的操作三种方式
- android自定义控件 几种方式总结