JS 二级菜单栏的tab切换

最新推荐文章于 2024-05-24 17:19:11 发布

weixin_30354675

最新推荐文章于 2024-05-24 17:19:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/haijuanya/p/9330839.html

本文介绍了一种使用CSS实现的响应式下拉菜单效果。通过简单的HTML结构与CSS样式结合JavaScript，可以创建出具备鼠标悬停展开功能的下拉菜单。文章提供了完整的代码示例，包括HTML结构、CSS样式及JavaScript交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　　　　　　　<style>
　　　　　　　　　　  #first{
  　　　　　　　　　　　　  display: flex;
　　　　　　　　　　　　   justify-content:space-between;
  　　　　　　　　　　　　 }
　　　　　　　　　　　 li{
   　　　　　　　　　　　　 list-style-type:none ;
  　　　　　　　　　　　　  border: 1px solid #999;
  　　　　　　　　　　　　  width: 150px;
  　　　　　　　　　　　　  height: 50px;
  　　　　　　　　　　　　  line-height: 50px;
  　　　　　　　　　　　　  text-align: center;
　　　　　　　　　　　　   background-color: pink;
　　　　　　　　　　　　   color: white;
　　　　　　　　　　　　  }
　　　　　　　　　　  div{
   　　　　　　　　　　　　 display: flex;
　　　　　　　　　　　　   justify-content: space-between;
  　　　　　　　　　　　　 }
　　　　　　　　　   .active{
    　　　　　　　　　　　　background-color: darkgrey;
  　　　　　　　　　　　　 }
  　　　　　　　　　 .show{
　　　　　　　　　　　　   display: block;
　　　　　　　　　　　　  }
　　　　　　　　　 .style{
   　　　　　　　　　　　　 display: none;
  　　　　　　　　　　　　 }
　　　　　　　　　　 li>ul{
   　　　　　　　　　　　　 display: none;
　　　　　　　　　　　　   margin-left: -41px;
  　　　　　　　　　　　　 }
　　　　　　　　 </style>
　　　　　　　 </head>
　　　　　　　<body>
　　　　　　　　　　 <ul id="first">
  　　　　　　　　　　　　 <li onmouseover="hov('one',this)" onmouseout="out('one',this)">列表一    //给每个菜单栏设置鼠标移入移出事件
　　　　　　　　　　　　　　   <ul id="one">
　　　　　　　　　　　　　　　　   <li>1</li>
　　　　　　　　　　　　　　　　    <li>2</li>
   　　　　　　　　　　　　　　　　 <li>3</li>
　　　　　　　　　　　　　　　　   <li>4</li>
　　　　　　　　　　　　　　　 </ul>
　　　　　　　　　　　　   </li>
   　　　　　　　　　　　　<li onmouseover="hov('two',this)" onmouseout="out('two',this)">列表二
  　　　　　　　　　　　　　　  <ul id="two">
   　　　　　　　　　　　　　　　　 <li>11</li>
   　　　　　　　　　　　　　　　　 <li>22</li>
　　　　　　　　　　　　　　　　   <li>33</li>
　　　　　　　　　　　　　　　　   <li>44</li>
　　　　　　　　　　　　　　  </ul>
　　　　　　　　　　　　  </li>
　　　　　　　　　　　　  <li onmouseover="hov('three',this)" onmouseout="out('three',this)">列表三
　　　　　　　　　　　　　　   <ul id="three">
　　　　　　　　　　　　　　　　   <li>55</li>
　　　　　　　　　　　　　　　　   <li>66</li>
　　　　　　　　　　　　　　　　   <li>77</li>
  　　　　　　　　　　　　　　　　  <li>88</li>
  　　　　　　　　　　　　　　 </ul>
   　　　　　　　　　　　　</li>
  　　　　　　　　　　　　 <li onmouseover="hov('four',this)" onmouseout="out('four',this)">列表四
  　　　　　　　　　　　　　　  <ul id="four">
　　　　　　　　　　　　　　　　   <li>88</li>
　　　　　　　　　　　　　　　　    <li>433</li>
　　　　　　　　　　　　　　　　    <li>222</li>
　　　　　　　　　　　　　　　　   <li>124</li>
　　　　　　　　　　　　　　　 </ul>
  　　　　　　　　　　　　 </li>
　　　　　　　　　　 </ul>
　　　　　　 <script>
　　　　　　　　　　   function hov(id1,e){
　　　　　　　　　　　　　　 var num = document.querySelector("#" + id1);
　　　　　　　　　　　　　　   num.className="show";
　　　　　　　　　　　　　　   e.className="active";
  　　　　　　　　　　 }
  　　　　　　　　　　 function out(id1,e){
  　　　　　　　　　　　　　　  var num = document.querySelector("#" + id1);
  　　　　　　　　　　　　　　  num.className="";
　　　　　　　　　　　　　　   e.className="";
　　　　　　　　　　  }
　　　　　　 </script>
　　　</body>
</html>