<!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. 关于如何成为高级java程序员

    今日,对如何进一步提升java.成为一个高级的程序员有了兴趣,在网上看到一篇回答,感觉不错,记下来 总结了以下六点:一.JAVA基础 要想成为高级Java程序员,Java是一定要学习的.要成为高级程序 ...

  2. [POI2005]AUT-The Bus 树状数组维护最大前缀和

    #include<cstdio> #include<algorithm> using namespace std; const int N=100000+3; int x[N] ...

  3. JXLS生成excel并自定义单元格样式

    本人最近需要每天统计数据表,并每周一发送统计结果的邮件,所以写了个springboot老自动完成工作.项目地址为:https://github.com/707293891/springboot 其中某 ...

  4. jmeter出现乱码怎么解决

    本文是抄袭安大叔的性能    如果想在性能获得更好的发展  请添加公众号:测试那点事  大叔的群号:435092293  大叔曾经担任百度技术总监  很牛逼  相信大叔知道了不会怪我  毕竟我是你的学 ...

  5. nyoj158-省赛来了

    省赛来了 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 一年一度的河南省程序设计大赛又要来了. 竞赛是要组队的,组队形式:三人为一队,设队长一名,队员两名. 现在问题就 ...

  6. C调用java方法签名

    1.AS2.0 D:\androidMyWork\SmartCam\app\build\intermediates\classes\debug>javap -s com.admin.smartc ...

  7. 跳一跳的Python环境搭建

    微信最新的小程序里面出了个叫“跳一跳”的小游戏,一经推出立马刷爆了朋友圈,而一些大神们也通过Python实现了自动玩游戏具体代码见(Github地址:https://github.com/wangsh ...

  8. ie7 text-indent input影响

    IE6/IE7中text-indent对input背景的影响 在text-indent在IE6/IE7中的位置偏移BUG一文中讨论过IE6/IE7中inline-block元素设置text-inden ...

  9. cogs 306. [SGOI] 糊涂的记者

    306. [SGOI] 糊涂的记者 ★★★   输入文件:sign.in   输出文件:sign.out   评测插件时间限制:1 s   内存限制:128 MB [问题描述] 在如今的信息社会中,时 ...

  10. spring的几个重要类和接口

    1.datasource接口是javax.sql包下的接口,不是spring,是javax.sql下的 datasource接口有个重要的方法getConnection()方法 Connection ...