您现在的位置是：首页 >>JsJs
Js做下拉菜单的三种方法
zhang2021-07-10 15:33:52【Js】人已围观
简介：
方法三：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>...
方法三：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){ //jquery准备好了再执行下面的操作，避免跨站引用jquery文件时未加载完毕导致运行出错
$("li").mouseover(function(){ //当鼠标放在li上面时，给这个li添加一个class命名，即：<liclass="a1 hover">，只是添加，不会删除已有的class命名
$(this).addClass("hover");
});
$("li").mouseout(function(){ //但鼠标从li上面移走时，把li的class命名移除，即：<li class="a1">，只是移除对class的hover命名，原有已经有的命名不会被移除
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<style type="text/css">
li{width:100px; float:left;}
li div{ display:none;}
.hover div{display:block;}
</style>
<li class="a1">11111<div>1a</div></li>
<li class="a2">22222<div>2a</div></li>
<li>33333<div>3a</div></li>
<li>44444<div>4a</div></li>
<li>55555<div>5a</div></li>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("li").mouseover(function(){ //当鼠标放在li上面时，修改这个li的class命名为hover，如果li已经有class命名，全部都会被替换掉。
$(this).attr("class","hover");
});
$("li").mouseout(function(){ //当鼠标从li上面移走时，li的class命名消失
$(this).attr("class","");
});
});
</script>
</head>
<body>
<style type="text/css">
li{width:100px; float:left;}
li div{ display:none;}
.hover div{display:block;}
</style>
<li>11111<div>1a</div></li>
<li>22222<div>2a</div></li>
<li>33333<div>3a</div></li>
<li>44444<div>4a</div></li>
<li>55555<div>5a</div></li>
</body>
</html>
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("li").mouseover(function(){ //当鼠标放在li上面时，li下面的div展示出来
$(this).find("div").css("display","block");
});
$("li").mouseout(function(){ //放鼠标从li上面移走时，li下面的div隐藏起来
$(this).find("div").css("display","none");
});
});
</script>
</head>
<body>
<style type="text/css">
li{width:100px; float:left;}
li div{ display:none;}
</style>
<li>11111<div>1a</div></li>
<li>22222<div>2a</div></li>
<li>33333<div>3a</div></li>
<li>44444<div>4a</div></li>
<li>55555<div>5a</div></li>
</body>
</html>
随机图文
文章评论
|
评论加载中...
|
点击排行
js关闭div
标签云
猜你喜欢
站点信息
- 建站时间：2018-11-17
- 文章统计：222篇文章
- 微信交流：扫描二维码，添加我