您现在的位置是:首页 >>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>





文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:134篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信二维码