<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #list li {

            list-style-type: none;

            width: 80px;

            height: 30px;

            line-height: 30px;

            background-color: beige;

            text-align: center;

            float: left;

            margin-left: 5px;

            position: relative;

        }

        #list li.current {

            background-color: burlywood;

        }

        #list li a {

            text-decoration: none;

            display:inline-block;

        }

        .odd {

            background-color: #ccc;

        }

        .even {

            background-color: #999;

        }

    </style>

</head>

<body>

<div id="menu">

    <ul id="list">

        <li class="current"><a href="javascript:void(0)">首页</a></li>

        <li><a href="javascript:void(0)">播客</a></li>

        <li><a href="javascript:void(0)">博客</a></li>

        <li><a href="javascript:void(0)">相册</a></li>

        <li><a href="javascript:void(0)">关于</a></li>

        <li><a href="javascript:void(0)">帮助</a></li>

    </ul>

</div>

<script>

    var ul = document.getElementById("list");

    //ul.getElementsByTagName("li")  不管层级关系

    //ul.childNodes 是通过层级关系获取的 这种方式很好

    //只是 他获取到的不只是我们想要的元素 还有其他东西

    var lis = ul.children;//所有的子元素

    //给所有的li 绑定排他事件

    for (var i = 0; i < lis.length; i++) {

         lis[i].onmouseout=function(){

            this.style.transform="scale(1)";

         };

        lis[i].onmouseover = function () {

            //干掉所有人

            for (var j = 0; j < lis.length; j++) {

                lis[j].className = "";

                lis[j].style.zIndex="";

            }

            //留下我自己

            this.className = "current";

            this.style.zIndex="1";//设置层级必须加定位啊！！！！

           // this.style.transform="rotate(30deg)";

            this.style.transform="scale(2)";

        };

    }

</script>

</body>

</html>

javascript中菜单栏切换案例的更多相关文章

  1. Javascript中自动切换焦点

      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...

  2. javascript中天气接口案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue后台管理项目中菜单栏切换的三种方法

    第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

  4. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  5. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  6. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  7. Javascript中关于cookie的那些事儿

    Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...

  8. JavaScript中的this陷阱的最全收集

    JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...

  9. javascript的列表切换

    演示地址:http://wjf444128852.github.io/demo/Carousel/index.html IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1.js获取要给定点击事 ...

随机推荐

  1. PCL：全程详解 VS2010+PCL配置

    浑浑噩噩半年时间,终于不得不干点和机器人有关的东西.ICRA和IROS推荐的三维图形库-点云库,几乎成了机器人视觉算法的标配. 参考了几篇文章,最后终于配置成功. 下面是文章地址: 这个有点看头,累积 ...

  2. 文件IO详解(四)---标准输入、标准输出和标准错误

    每个进程都会默认打开3个文件描述符,即0.1.2.其中0代表标准输入流.1代表标准输出流.2代表标准错误流.通常标准输入流对应着键盘的设备文件.标准输出流和错误流对应着显示器的设备文件.在编程中通常使 ...

  3. mysql 最大连接数

    方式一: 一次性修改  服务重启后还原 查看  show variables like 'max_connections%'; 修改 set GLOBAL max_connections=1024; ...

  4. DB2高可用hadr搭建参数配置

    主机上执行db2 UPDATE DB CFG FOR XMHIS USING HADR_LOCAL_HOST 192.168.1.2db2 UPDATE DB CFG FOR XMHIS USING ...

  5. windows 端口号占用和解决方法

    https://blog.csdn.net/qq_39657909/article/details/80378983

  6. loadrunner笔记----好记性不如烂笔头

    1.Loadrunner主要由Vugen,Controller和Analyais3部分组成 2.简述描述集合点和集合点函数 集合点可以同步虚拟用户,以便能在同一时刻执行任务,集合点函数lr_rende ...

  7. 实验一：JAVA实验环境搭建 ，JDK下载与安装及 Eclipse下载与安装

    一.搭建JAVA实验环境 1.JDK的下载 (1)打开 IE 浏览器,输入网址“http://www.oracle.com/index.html”,浏览 Oracle 官方主页.鼠标双击Downloa ...

  8. HDU 1164 Eddy's research I（ 试除法 & 筛法改造试除法 分解整数 ）

    链接:传送门 题意:给出一个整数 n ,输出整数 n 的分解成若干个素因子的方案 思路:经典的整数分解题目,这里采用试除法 和 用筛法改造后的试除法 对正整数 n 进行分解 方法一:试除法对正整数 n ...

  9. UVA 12633 Super Rooks on Chessboard (生成函数+FFT)

    题面传送门 题目大意:给你一张网格,上面有很多骑士,每个骑士能横着竖着斜着攻击一条直线上的格子,求没被攻击的格子的数量总和 好神奇的卷积 假设骑士不能斜着攻击 那么答案就是没被攻击的 行数*列数 接下 ...

  10. [CodeForces]981C Useful Decomposition

    李煜东dalao今天给我们讲课了QwQ ppt上一道题 英文题说一下题意吧,以后又看不懂了 将一棵树分割成多个简单路径,每个边只能在一条路径上,但至少有一个公共节点. 输出简单路径分割方法/No 由题 ...