学习了DOM的知识，今天开始做些练习，想到了一个网页滑动门的特效，见下图：

1、通过建立索引实现

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js简单滑动门</title>

<style type="text/css">

*{ padding:0; margin:0; font-size:14px;}

li{ list-style:none}

#tab1{ width:600px; height:400px; margin:20px auto; overflow:hidden; position:relative}

#tab1_memu{ width:600px; height:40px; position:absolute; left:0; top:0; z-index:2; border-left:1px solid #333}

#tab1_memu li{ width:100px;height:39px; line-height:40px; background:#eee;float:left;text-align:center; border-right:1px solid #333;border-top:1px solid #333;}

#tab1_memu li.current{font-weight:bold; color:#F00; background:#fff;border-right:1px solid #333;border-top:2px solid #f00;border-bottom:1px solid #fff; }

#tab1_main{ width:598px; height:320px; position:absolute; left:0; top:40px; border:1px solid #333;z-index:1}

#tab1_main li{ display:none}

#tab1_main li.current{ display:block}

#tab1_main p{ margin:20px}

</style>

<script >

/*原理：

1、页面载入后，设置选项卡第一项为默认显示，改变其css样式

2、添加事件处理函数

当鼠标浮动到某菜单时，(1)清除所有菜单节点的className属性，为当前菜单项添加className属性(2)隐藏所有选项卡内容节点，显示菜单项对应的内容节点

*/

window.onload = function(){

	var tabs=document.getElementById("tab1_memu").getElementsByTagName("LI");

	var tab_contents=document.getElementById("tab1_main").getElementsByTagName("LI");

	tabs[0].className="current"; //初始化

	tab_contents[0].className="current";//初始化

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

		tabs[i].index=i;//给tabs[i]对象增加一个属性并赋值，即为每个菜单建立索引

		tabs[i].onmouseover=function(){

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

				tabs[j].className="";

				tab_contents[j].className="";

			}

			this.className="current";

			tab_contents[this.index].className="current";

		}//为每个菜单项绑定鼠标浮动事件

	}

}

</script>

</head>

<body>

  <div id="tab1" >

      <ul id="tab1_memu">

        <li>菜单1</li>

        <li>菜单2</li>

        <li>菜单3</li>

        <li>菜单4</li>

      </ul>

      <ul id="tab1_main">

      	<li><p>内容1</p></li>

        <li><p>内容2</p></li>

        <li><p>内容3</p></li>

        <li><p>内容4</p></li>

      </ul>

  </div>

</body>

</html>

这种方式在扩展一下，做一个可以重用的滑动门效果，javascript部分改写为：

function hdm(m_id,c_id){

    var tabs=document.getElementById(m_id).getElementsByTagName("LI");

    var tab_contents=document.getElementById(c_id).getElementsByTagName("LI");

    tabs[0].className="current"; //初始化

    tab_contents[0].className="current";//初始化

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

        tabs[i].index=i;//给tabs[i]对象增加一个属性并赋值，即为每个菜单建立索引

        tabs[i].onmouseover=function(){

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

                tabs[j].className="";

                tab_contents[j].className="";

            }

            this.className="current";

            tab_contents[this.index].className="current";

        }//为每个菜单项绑定鼠标浮动事件

    }

}

window.onload = function(){

    hdm("tab1_memu","tab1_main");

}

Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解的更多相关文章

  1. Flutter学习笔记（15）--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  2. Javascript学习笔记2.1 Javascript与DOM简介

    DOM(文档对象模型)简介 DOM(文档对象模型)针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构,它是中立于平台和语言的接口,允许程序和脚本 ...

  3. 1.1（JavaScript学习笔记）、JavaScript基础

    一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...

  4. [原创]java WEB学习笔记38：EL 中的 11个 隐含对象 详解

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. linux初级学习笔记八：linux权限管理及权限管理命令详解！(视频序号：04_2)

    本节学习的命令:chown,chgrp,chmod,openssl,umask 本节学习的技能: 文件权限详解及对其的操作 生成随机密码命令 用遮罩码对用户权限进行修改 站在用户登陆的角度来说SHEL ...

  6. javascript学习笔记（四）：DOM操作HTML

    当网页被加载时,浏览器会创建页面的文档对象模型Document Object Model,简称DOM Dom操作html 1:改变页面中所有HTML元素 2:改变页面中所有HTML属性 3:改变页面中 ...

  7. javascript学习笔记（九）：DOM操作HTML的各种方法使用

    <!DOCTYPE html> <html> <head lang="en"> <meta chaset="UTF-8" ...

  8. JavaScript学习笔记系列1:JavaScript的是什么？

    一.JS是什么? JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年.它最初的设计目标是改善网页的用户体验. 作者:Brendan Eich 期初JavaS ...

  9. JavaScript学习笔记——1.了解JavaScript

    百度百科: JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HT ...

随机推荐

  1. 史上最详cxf-Springmvc-maven实现webservice教程(转)

    虽知道webservice,工作两年一直没使用过,最近不忙趁机研究了下,实现了简单的服务端及客户端调用.鉴于慕课网没有webservice的教程,大多又都是学生,就在这里跟大家分享下,内容比较详细.大 ...

  2. echarts在IE8下遮挡其他组件的问题

    echarts的图在IE8下会浮在上层遮挡住其他组件,解决方式是页面中引入 <meta http-equiv="X-UA-Compatible" content=" ...

  3. div嵌套导致子区域margin-top失效不起作用的解决方法

    有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...

  4. 对魔兽世界、支付宝、Linux三类软件的简单分析

    软工第一次作业: 软件有很多种,如工具类软件.游戏类软件.系统类软件,它们的运行方式也各种各样,如以单机方式运行.以网站方式运行或者以APP方式运行在手机端等,请选取三种软件,分析它们各自的特点. 这 ...

  5. Nginx与Lua利用fpm打成rpm包

    1.下载相关软件 需要软件有:Nginx,LuaJIT,ngx_devel_kit,ngx_lua等安装文件 安装Lua或者LuaJIT都是可以的,但是出于效率的考虑,推荐安装LuaJITshell& ...

  6. 移动端重构系列-移动端html页面优化

    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在 ...

  7. Sublime Text 3使用指南（2）——快捷键

    选择类 快捷键 说明 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同 ...

  8. AndroidManifest.xml详解(下)

    本文编辑整理自:http://blog.163.com/hero_213/blog/static/39891214201242835410742/ 八.第三层<activity-alias> ...

  9. angular的$scope

    angularJS是一个MVVM的前端js框架. $scope的作用是angular向视图(html)传递数据的通道,它不负责处理和操作数据.也就是说要想向视图传递数据的话,必须定义$scope变量. ...

  10. JS 之JSON

    JSON是Javascript中的对象,其简单理解为下: