`

Javascript 实例-- 滑动菜单

 
阅读更多 
<html>
<head>
<style>
	#menu h2{
		width:80px;
		line-height:25px;
		margin:0px;
		padding:0px;
		border-right:2px solid white;
		float:left;
		background:#999;
		text-align:center;
		color:white;
	}
	
	#menu .selected{
		background:#666;
	}
	
	#content div{
		width:244px;
		height:120px;
		float:clear;
		background:#666;
		display:none;
		color:white;
	}
	#content .selected{
		display:block;
	}
</style>

</head>
<body>
<div id="menu">
	<h2 class="selected" onmouseover="select(0)">one</h2>
	<h2 onmouseover="select(1)">two</h2>
	<h2 onmouseover="select(2)">three</h2>
</div>

<div id="content">
	<div class="selected">
		<br>aaaaaaaaaaaaa 
		<br>aaaaaaaaaaaaa 
		<br>aaaaaaaaaaaaa 
	</div>
	<div>
		<br>bbbbbbbbbbbbb
		<br>bbbbbbbbbbbbb
		<br>bbbbbbbbbbbbb
	</div>
	<div>
		<br>ccccccccccccc
		<br>ccccccccccccc
		<br>ccccccccccccc
	</div>
</div>

<script>
	function select(num){
		var menus = document.getElementsByTagName('h2');
		var contents = document.getElementById('content').getElementsByTagName('div');
		for(var i=0; i<menus.length; i++){
			if(num==i){
				menus[i].className='selected';
				contents[i].style.display="block"
			}else{
				menus[i].className='';
				contents[i].style.display="none"
			}
		}
	}
</script>
</body>
</html>
分享到：
| Javascript 实例--全选反选
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    程序天下:JavaScript实例自学手册

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    《程序天下：JavaScript实例自学手册》光盘源码

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    javascript简单实现滑动菜单效果的方法

    本文实例讲述了javascript简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下： 整个javascript代码共42行，其中主要函数Slide代码26行,可以改进哦！ &lt;!DOCTYPE ...

    javascript完全学习手册1 源码

    14.2.5 图片滑动效果 423 14.2.6 三维相册 433 14.3 时间特效 442 14.3.1 时钟提示自动关闭 442 14.3.2 日历生成器 444 14.4 窗口特效 450 14.4.1 窗口拖动 451 14.4.2 图层受标签控制显示 457 14.5 鼠标特效 460 ...

    javascript完全学习手册2 源码

    目录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1．1 JavaScript概述 1．1．1 什么是JavaScript 1．1．2 JavaScfipt的基本特点 1．1．3 常用的Web开发语言 ...14．6．3 滑动菜单 14．6．4 右键菜单 ……

    javascript图片滑动效果实现

    主要介绍了超实用的javascript图片滑动效果实现方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下

    超酷，超经典的CSS实例

    这里边包含：可以隐藏与滑出显示的超炫CSS+JS菜单实例，侧边滑动效果 javascript CSS菜单实例，仿苹果菜单的超酷滑动效果等CSS实例。都是很经典的东西，如果想要把界面做的很漂亮，很在意用户体验的朋友可以下载下来...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    JS实现的左侧竖向滑动菜单效果代码

    本文实例讲述了JS实现的左侧竖向滑动菜单效果代码。分享给大家供大家参考，具体如下： 这是一款经过改造的左侧竖向滑动菜单，基于JavaScript+CSS，没有过多的修饰，主要想实现菜单的动画效果，想用的朋友，自己美化...

    swipeable-menu:touch用于触摸设备的简单JS框架不可知的可滑动菜单

    显示菜单用户界面性能出色的可滑动列表幻灯片菜单显示可在任何框架上运行，例如苹果邮件或Gmail。 重点是简单性。 试用演示您的移动设备上安装对于演示，使用npm start启动项目后。 只需打开index.html并在移动视图...

    JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下： 这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个...

    JS+CSS实现经典的左侧竖向滑动菜单效果

    本文实例讲述了JS+CSS实现经典的左侧竖向滑动菜单效果。分享给大家供大家参考。具体如下： 这是一款经过改造的左侧竖向滑动菜单，基于JavaScript+CSS，没有过多的修饰，主要想实现菜单的动画效果，想用的朋友，自己...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...

    JS+CSS实现简单滑动门(滑动菜单)效果

    这是一款超简约设计的滑动门菜单，鼠标放到主菜单上，里面的内容会跟着变化，实际上本演示是一个范例，从代码中的注释你就能感觉到，每一步都有注释，对学习JavaScript和CSS都有帮助，也为你以后写出比这更漂亮、更...

    JS+CSS实现大气清新的滑动菜单效果代码

    本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码。分享给大家供大家参考，具体如下： 这是一款比较大气清新的滑动导航菜单，CSS和JavaScript配合完成，鼠标放到一级菜单上，会滑出二级的菜单，兼容性也不错，...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    博客Blog横向jquery动态滑动菜单插件示例 29.打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航...

    JS+CSS实现简易实用的滑动门菜单效果

    本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下： 这是一个简洁实用的CSS+JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够...

    精通JavaScript

    2．本书所附光盘实例代码： 第1章（\第1章） 查看1.2.htm中noscript显示效果的方法如下： 1．将该实例复制到C:\Inetpub\wwwroot下； 2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动...

    Android UI组件实例集合

    是 Android 上实现类似 Facebook 和 Path 2.0 滑动式菜单的组件。 12、AsyncImageView 是 Android 上的一个异步从网络上获取图片并进行浏览的开源组件，可自动在本地进行缓存。该项目是 GreenDroid 的一部分。 13...

Magicbox
Global site tag (gtag.js) - Google Analytics