<!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. AS3.0 扑克牌乱序排列法洗牌

    package { /* *@ClassName:package::PokerMain *@Intro:这是一个初始化1-52扑克牌,然后进行乱序排列进行洗牌: *@Author:非若 *@Date: ...

  2. 跳出语句 break continue

    break 使用场景:终止switch或者循环 在选择结构switch语句中 在循环语句中 离开使用场景的存在是没有意义的 public static void main(String[] args) ...

  3. SPOJ-CRAN02 - Roommate Agreement(前缀和)

    CRAN02 - Roommate Agreement Leonard was always sickened by how Sheldon considered himself better tha ...

  4. linux 性能分析与优化

    一.影响Linux服务器性能的因素 1.操作系统级 (CPU 内存 磁盘I/O性能 网络带宽) 2.程序应用级 二.系统性能评估标准   好  坏 极差 cpu user% +sys% <70% ...

  5. yum 安装nginx(配置开机启动)

    yum install -y nginx 通过yum安装的时候提示下面的错误 [root@localhost yum.repos.d]# yum install nginx 已加载插件:fastest ...

  6. nyoj56-阶乘因式分解（一）

    56-阶乘因式分解(一) 内存限制:64MB时间限制:3000msSpecial Judge: No accepted:6submit:7 题目描述: 给定两个数m,n,其中m是一个素数. 将n(0& ...

  7. BJOI2012 最多的方案

    BJOI2012 最多的方案 Description ​ 第二关和很出名的斐波那契数列有关,地球上的OIer都知道:F1=1, F2=2, Fi = Fi-1 + Fi-2,每一项都可以称为斐波那契数 ...

  8. 3.1、Ansible命令简要说明及初步使用

    1.Ansible命令 1.1 Ad-hoc说明 Ansible中有一个很重要的功能就是可以执行ad-hoc命令,它表示即时.临时的意思,即表示一次性的命令.与之相对的是ansible playboo ...

  9. RabbitMQ学习总结（7）——Spring整合RabbitMQ实例

    1.RabbitMQ简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现.  官网:http://www.rabbitmq. ...

  10. Eclipse中项目去除Js验证

    删除项目.project文件中的 <buildCommand>   <name>org.eclipse.wst.jsdt.core.javascriptValidator< ...