JS 二级菜单栏的tab切换

　　　　　　　　<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 οnmοuseοver="hov('one',this)" οnmοuseοut="out('one',this)">列表一    //给每个菜单栏设置鼠标移入移出事件
　　　　　　　　　　　　　　   <ul id="one">
　　　　　　　　　　　　　　　　   <li>1</li>
　　　　　　　　　　　　　　　　    <li>2</li>
   　　　　　　　　　　　　　　　　 <li>3</li>
　　　　　　　　　　　　　　　　   <li>4</li>
　　　　　　　　　　　　　　　 </ul>
　　　　　　　　　　　　   </li>
   　　　　　　　　　　　　<li οnmοuseοver="hov('two',this)" οnmοuseοut="out('two',this)">列表二
  　　　　　　　　　　　　　　  <ul id="two">
   　　　　　　　　　　　　　　　　 <li>11</li>
   　　　　　　　　　　　　　　　　 <li>22</li>
　　　　　　　　　　　　　　　　   <li>33</li>
　　　　　　　　　　　　　　　　   <li>44</li>
　　　　　　　　　　　　　　  </ul>
　　　　　　　　　　　　  </li>
　　　　　　　　　　　　  <li οnmοuseοver="hov('three',this)" οnmοuseοut="out('three',this)">列表三
　　　　　　　　　　　　　　   <ul id="three">
　　　　　　　　　　　　　　　　   <li>55</li>
　　　　　　　　　　　　　　　　   <li>66</li>
　　　　　　　　　　　　　　　　   <li>77</li>
  　　　　　　　　　　　　　　　　  <li>88</li>
  　　　　　　　　　　　　　　 </ul>
   　　　　　　　　　　　　</li>
  　　　　　　　　　　　　 <li οnmοuseοver="hov('four',this)" οnmοuseοut="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>

使用鼠标移入移出事件，，，，，，，，，，，，，，，

转载于:https://www.cnblogs.com/haijuanya/p/9330839.html

JS 二级菜单栏的tab切换相关推荐

使用js实现二级菜单栏切换
js实现二级菜单栏切换一.一级菜单栏和二级菜单在同一个盒子内. 当鼠标经过水果盒子时,让下面的内容显示. <!DOCTYPE html> <html lang="en&q ...
bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例
本文实例讲述了JS实现的tab切换并显示相应内容模块功能.分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块. 二层循环将元素 ...
如何实现二级菜单 html,javascript,html5_如何用vue实现二级菜单栏，javascript,html5,html,vue.js - phpStudy...
如何用vue实现二级菜单栏这是我的代码 import Menu from '../../libs/menu'; export default { data () { return { msg: '登 ...
html+css+js TAB切换
1,效果图 2.html部分 <!DOCTYPE html> <html> <head lang="en"><meta charset=& ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...

JS 二级菜单栏的tab切换

JS 二级菜单栏的tab切换相关推荐

最新文章

热门文章