`

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实例应用---页面特效类.rar

    在"javascript实例应用---页面特效类.rar"这个压缩包中，我们很显然会发现一系列关于JavaScript如何用于创建各种页面特效的实例。这些特效可以增强用户的浏览体验，使网站或应用程序更具吸引力。 首先，页面特效类...

    JavaScript网页特效实例－光盘代码

    2. **滑动面板和下拉菜单**：这些常见于导航栏，可以通过JavaScript监听用户事件（如点击）来控制内容的显示和隐藏，提升用户体验。 3. **图片轮播**：JavaScript可以用来控制一组图片按特定顺序自动切换，常用于...

    JavaScript实例应用 JavaScript实例应用

    1. **动态网页交互**：JavaScript可以实时更新网页内容，如响应用户的点击事件，动态加载数据，实现下拉菜单、滑动效果等。通过修改DOM（文档对象模型）元素，JavaScript可以改变网页布局和内容。 2. **表单验证**...

    网页编程JAVASCRIPT实例代码

    9. **css-sina.htm**：这个文件可能涉及到CSS，可能是在展示如何结合JavaScript和CSS实现新浪网风格的布局或特效，例如滑动菜单、下拉框等。 10. **js-math.htm**：JavaScript也可以进行数学计算，这个文件可能包括...

    Qml侧边滑动菜单QmlSlidingMenu.7z

    在QmlSlidingMenu项目中，开发者可能使用了JavaScript表达式和方法来处理用户的滑动事件，监听手指的触摸动作，判断是否触发滑动菜单的显示或隐藏。同时，通过QML的动画系统，可能实现了平滑的滑入滑出效果，增强...

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

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

    javascript特效--经常用到的特效

    5. **下拉菜单**：下拉菜单在导航栏中很常见，JavaScript可以实现菜单项展开和收起，以及多级菜单的交互效果。 6. **滚动特效**：如固定顶部导航、滚动监听、视差滚动等，这些特效可以增强页面的视觉深度和互动性。...

    基于Vue的可滑动菜单栏

    "基于Vue的可滑动菜单栏"是一个专为移动端设计的组件，利用Vue.js框架的强大功能，实现了一个高效、流畅且易于定制的滑动菜单栏。Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易学习和高可维护性受到...

    javascript实例（1470个）

    这个压缩包“JavaScript实例（1470个）”显然包含了大量的JS代码示例，覆盖了各种常见的前端特效和功能实现。 在JavaScript的世界里，实例是将抽象的概念转化为具体代码的过程，这些实例可能是用于创建动态效果、...

    微信小程序项目实例-movecss效果：菜单、下拉（源码+截图）

    在本微信小程序项目实例中，我们探讨的核心是movecss效果，它主要应用于菜单滑动和下拉菜单的设计，以及实现随机推荐功能。movecss是一种CSS3技术，它通过平移、旋转、缩放等变换来增强用户体验，尤其适用于移动设备...

    JAVASCRIPT页面效果实例

    在“JAVASCRIPT页面效果实例”中，我们可以深入探讨如何使用JavaScript来增强用户体验并创建引人入胜的网页效果。下面将详细介绍几个关键的JavaScript页面效果及其实现方法。 1. **页面加载动画** 当用户访问网站...

    javascript制作的滑动图片菜单

    接下来，JavaScript部分定义了一个名为`slideMenu`的函数，该函数负责滑动菜单的逻辑。`slideMenu.build`函数接受参数，如滑动速度（`st`）、时间间隔（`t`）、动画延迟（`mt`）、初始滑动位置（`s`）等，用于初始化...

    JavaScript网页特效实例大全 书籍源码

    这本书籍《JavaScript网页特效实例大全》的源码提供了一个丰富的学习资源，帮助开发者深入理解和实践JavaScript的各种特效应用。 首先，我们要了解JavaScript的基础。JavaScript是一种解释型、面向对象的脚本语言，...

    JavaScript特效实例

    通过控制时间和帧率，可以创建平滑的过渡效果，比如滑动菜单、弹出框淡入淡出等。 六、常见特效实例 1. 图片轮播：利用JavaScript控制图片的显示和隐藏，配合CSS实现过渡动画。 2. 滑动导航：通过监听滚动事件，...

    javascript经典特效---极酷导航菜单.rar

    总的来说，"极酷导航菜单"是JavaScript在网页动态效果和用户体验提升方面的一个实例，它充分展示了JavaScript在网页开发中的强大功能和灵活性。通过学习和理解这个案例，开发者可以进一步提升自己在JavaScript特效和...

    jquery菜单滑动实例

    本实例将详细介绍如何利用jQuery和一个名为`jquery.backgroundPosition.js`的插件创建一个滑动菜单。 ### jQuery基础 jQuery简化了DOM操作，事件处理和动画效果，使得开发者可以更高效地编写JavaScript代码。在本...

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

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

    javaScript特效实例+技巧

    - JavaScript特效包括但不限于：滑动菜单、轮播图、图片懒加载、弹出对话框、动画效果、拖拽功能、滚动条优化等。这些特效实例是通过JavaScript控制DOM元素的样式、位置、内容等属性，利用定时器和事件监听来实现...

    JavaScript实例.rar

    这个"JavaScript实例.rar"压缩包文件包含了一系列有关JavaScript实际应用的例子，这些例子涵盖了多个核心领域，如用户交互、页面动态效果、数据处理以及界面元素的控制。 1. 导航与菜单：JavaScript能够创建动态和...

    JavaScript实例应用(PDG)

    它能够实时更新页面内容，无需刷新页面，如实现表单验证、滑动菜单、图片轮播等。在网页制作教程中，了解如何利用JavaScript控制DOM（Document Object Model）至关重要，因为DOM是HTML和XML文档的结构表示，...

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