<!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. todo reading

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind https ...

  2. 【Five-Minute Share】“为什么要选择自增型的主键”

    我们在开发的时候经常会听到这样的建议:1. 设计数据库表的时候,要为每个表设置一个主键:2. 主键最好是跟业务无关的: 3. 最好是自增的: 于是,很多新入行的程序猿们把这些前辈们的教条拿来就用,每个 ...

  3. Apex语言（一）开发环境

    1.注册salesforce开发者https://developer.salesforce.com/ 2.开发者登录https://login.salesforce.com/ 3.Apex开发者工具 ...

  4. BZOJ 1303: [CQOI2009]中位数图 问题转化_扫描_思维

    将比 b 大的设成 1,比 b 小的设成 -1,开个桶左右扫描一下,乘法原理乘一乘就好了. 虽然一眼切,不过这个基于中位数的转化还是相当重要的.middle 那个主席树的题也需要该做法 Code: # ...

  5. When you hit a wall, just kick it in.

    Teach Yourself Programming in Ten Years. ----- Peter Norvig Teach Yourself Programming in Ten Years  ...

  6. vue-cli 中eslint代码检查之过滤指定文件

    在需要过滤的文件头部末尾分别添加:/* eslint-disable */,/* eslint-disable no-new */

  7. vue中数组变动更新检测

    Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push() pop() shift() unshift( ...

  8. ES6标准入门（第三版）学习笔记(1)

    ES6声明变量的六种方法 ES5只有两种 var,function命令 ES6新增了let,const,class,import命令 验证var与let用法上的不同 var a = []; for ( ...

  9. Android学习总结（4）——Andorid Studio熟练使用

    前言 该文以Android Studio2.1.1(Bundle)为例.JDK使用的是1.8版本,也建议大家使用1.8版本. 使用技巧无先后顺序. Android Studio 2.1.1 软件下载 ...

  10. el表达式中的比较和包含

    相等( equal ) :eq 不相等( not equal ): ne / neq 大于( greater than ): gt 小于( less than ): lt 大于等于( great th ...