<!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. 精通css学习记录

    #字体 * 无衬线字体(Sans-serif):Helvetica,Arial,'Lucida Family',Verdana,Tohoma,'Trebuchet MS'  * 有衬线字体(Serif ...

  2. 00--Linux常用命令大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  3. （转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...

  4. PhotoZoom Classic 7中的新功能

    众所周知PhotoZoom Classic是家庭使用理想的放大图像软件.目前很多用户还在使用PhotoZoom Classic 6,对于PhotoZoom Classic 7还是有点陌生.其实在6代衍 ...

  5. PhotoZoom控制面板简介说明

    PhotoZoom是一款极其简单的图片无损放大工具,简单几步渲染出完美的放大照片,呈现无与伦比的画质效果.即可虽然简单,菜单和面板的功能很少,但却是设计师的必备神器,因为其简单易用性,它的软件菜单命令 ...

  6. gulp给文件后添加md5时间戳

    这里为总的方法,实际项目中拷贝出来的,底下有详细的总结以及只针对添加时间戳的方法 1 // 引入 gulp及组件 var gulp = require('gulp'), autoprefixer = ...

  7. Python基础：使用list & tuple

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. tuple 小结 list和tuple是Python内置的有序集合,一个可变,一个不 ...

  8. JDK源码中的英文注释翻译（Class）

    public final class Class<T> implements java.io.Serializable, GenericDeclaration, Type, Annotat ...

  9. oracle AWR详解

    原文地址:https://blog.csdn.net/elvis_lfc/article/details/52326148 啥是AWR? =============================== ...

  10. gradle springboot打包时忽略某个配置文件

    jar { exclude "**/bootstrap.properties" }