`
younglibin
  • 浏览: 1214005 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

鼠标经过导航栏改变页面的内容

    博客分类:
  • JSP
阅读更多

用到的css:

<style type="text/css"> 
body{ 
color: #000; 
font-family: "宋体", arial; 
font-size: 12px; 
background: #fff; 
text-align: center; 
margin: 0; 
} 
.nTab{ 
float: left; 
width: 960px; 
margin: 0 auto; 
border-bottom:1px #AACCEE solid; 
background:#d5d5d5; 
background-position:left; 
background-repeat:repeat-y; 
margin-bottom:2px; 
} 
.nTab .TabTitle{ 
clear: both; 
height: 22px; 
overflow: hidden; 
} 
.nTab .TabTitle ul{ 
border:0; 
margin:0; 
padding:0; 
} 
.nTab .TabTitle li{ 
float: left; 
width: 70px; 
cursor: pointer; 
padding-top: 4px; 
padding-right: 0px; 
padding-left: 0px; 
padding-bottom: 2px; 
list-style-type: none; 
} 
.nTab .TabTitle .active{ 
background:#fff; 
border-left:1px #AACCEE solid; 
border-top:1px #AACCEE solid; 
border-right:1px #AACCEE solid; 
border-bottom:1px #fff solid; 
} 
.nTab .TabTitle .normal{ 
background:#EBF3FB; 
border:1px #AACCEE solid; 
} 
.nTab .TabContent{ 
width:auto;background:#fff; 
margin: 0px auto; 
padding:10px 0 0 0; 
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; 
} 
.none {display:none;} 
</style> 

 用到的js函数:

<script type="text/javascript"> 
function nTabs(thisObj,Num){ 
alert(thisObj.className);
			if(thisObj.className == "active")return; 
			var tabObj = thisObj.parentNode.id; 
			var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
			for(i=0; i <tabList.length; i++){ 
						if (i == Num){ 
								thisObj.className = "active"; 
								document.getElementById(tabObj+"_Content"+i).style.display = "block"; 
						}else{ 
								tabList[i].className = "normal"; 
								document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
						} 
			} 
} 
</script> 

 

 

完整页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>滑动门(舌签)完美版 - 易看网络</title> 
<style type="text/css"> 
body{ 
color: #000; 
font-family: "宋体", arial; 
font-size: 12px; 
background: #fff; 
text-align: center; 
margin: 0; 
} 
.nTab{ 
float: left; 
width: 960px; 
margin: 0 auto; 
border-bottom:1px #AACCEE solid; 
background:#d5d5d5; 
background-position:left; 
background-repeat:repeat-y; 
margin-bottom:2px; 
} 
.nTab .TabTitle{ 
clear: both; 
height: 22px; 
overflow: hidden; 
} 
.nTab .TabTitle ul{ 
border:0; 
margin:0; 
padding:0; 
} 
.nTab .TabTitle li{ 
float: left; 
width: 70px; 
cursor: pointer; 
padding-top: 4px; 
padding-right: 0px; 
padding-left: 0px; 
padding-bottom: 2px; 
list-style-type: none; 
} 
.nTab .TabTitle .active{ 
background:#fff; 
border-left:1px #AACCEE solid; 
border-top:1px #AACCEE solid; 
border-right:1px #AACCEE solid; 
border-bottom:1px #fff solid; 
} 
.nTab .TabTitle .normal{ 
background:#EBF3FB; 
border:1px #AACCEE solid; 
} 
.nTab .TabContent{ 
width:auto;background:#fff; 
margin: 0px auto; 
padding:10px 0 0 0; 
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; 
} 
.none {display:none;} 
</style> 
<script type="text/javascript"> 
function nTabs(thisObj,Num){ 
			if(thisObj.className == "active")return; 
			var tabObj = thisObj.parentNode.id; 
			var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
			for(i=0; i <tabList.length; i++){ 
						if (i == Num){ 
								thisObj.className = "active"; 
								document.getElementById(tabObj+"_Content"+i).style.display = "block"; 
						}else{ 
								tabList[i].className = "normal"; 
								document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
						} 
			} 
} 
</script> 
</head> 
<body> 
<div align="center" style="padding-left:25px;"> 
<!-- 选项卡0开始 --> 
<div class="nTab"> 
<!-- 标题开始 --> 
<div class="TabTitle"> 
<ul id="myTab0"> 
<li class="active" onmouseover="nTabs(this,0);">易看首页</li> 
<li class="normal" onmouseover="nTabs(this,1);">易看阅读</li> 
<li class="normal" onmouseover="nTabs(this,2);">易看鉴赏</li> 
<li class="normal" onmouseover="nTabs(this,3);">易看商城</li> 
<li class="normal" onmouseover="nTabs(this,4);">易看下载</li> 
<li class="normal" onmouseover="nTabs(this,5);">易看问答</li> 
</ul> 
</div> 
<!-- 内容开始 --> 
<div class="TabContent"> 
<div id="myTab0_Content0"> <a href="http://www.eslook.com" target="_blank">欢迎光临易看网络 </a></div> 
<div id="myTab0_Content1" class="none">易看阅读,网页教程,程序修改</div> 
<div id="myTab0_Content2" class="none">站在巨人的肩膀之上可以使我们看得更远</div> 
<div id="myTab0_Content3" class="none">您可以购买本站商器来支持易看</div> 
<div id="myTab0_Content4" class="none">工欲其善,必先利其器</div> 
<div id="myTab0_Content5" class="none">有啥问题,敬请提问</div> 
</div> 
</div> 


</div> 
</body> 
</html> 

 

1
0
分享到:
评论

相关推荐

    CSS3鼠标经过导航菜单动画效果代码

    本示例中,我们将深入探讨如何使用CSS3实现鼠标经过导航菜单时的动画效果。 首先,`index.html`文件是网页的主体结构,它包含了HTML元素,如`&lt;nav&gt;`用于创建导航菜单,`&lt;ul&gt;`和`&lt;li&gt;`用于构建菜单项。CSS3的鼠标...

    鼠标经过切换背景的jquery导航条特效

    在这个特效中,jQuery的主要作用是绑定鼠标经过事件,并在事件触发时执行相应的代码,改变导航条元素的背景。 实现这个特效的基本步骤如下: 1. **HTML结构**:首先,我们需要创建一个包含导航条项的HTML结构,每...

    随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示

    在网页设计中,提供良好的用户体验至关重要,而"随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示"正是提升用户体验的一种方法。这种设计技术常见于移动端网站,能够优化空间利用,使得用户在浏览内容时不会被固定...

    js监听滚动条改变导航元素位置和样式.rar

    这个名为"js监听滚动条改变导航元素位置和样式.rar"的压缩包文件提供了一个实例,教你如何利用原生JavaScript来实现这一功能,特别适合初学者学习。以下是关于这个主题的详细讲解。 首先,我们需要理解滚动条事件。...

    flash动画导航条鼠标滑过弹性动画展示二级菜单

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。而“Flash动画导航条”是一种采用Adobe Flash技术制作的交互式导航条,它通过动态效果和交互性提升用户体验。本话题将深入探讨...

    导航菜单鼠标放上去横向显示子菜单

    在IT行业中,尤其是在网页开发领域,导航菜单是一个至关重要的元素,它帮助用户高效地浏览网站内容。本示例“导航菜单鼠标放上去横向显示子菜单”聚焦于一个常见的交互设计模式,即通过悬停鼠标来展开横向子菜单,...

    导航条_水平2

    在网页设计中,导航条是页面布局的重要组成部分,它为用户提供了一个直观的界面来浏览网站的不同部分。"导航条_水平2"这个主题主要聚焦于水平布局的导航条设计,这是最常见的网页导航形式,适用于大部分网站,特别是...

    纯css鼠标滑过动态导航

    在网页设计中,导航栏是页面布局的重要组成部分,它引导用户轻松访问网站的不同部分。"纯CSS鼠标滑过动态导航"是一种使用纯CSS(Cascading Style Sheets)技术实现的交互效果,当用户将鼠标悬停在导航菜单项上时,会...

    css导航栏精选,javascript导航栏

    3. **动态加载内容**:AJAX(异步JavaScript和XML)技术允许在不刷新整个页面的情况下更新导航栏中的内容,如实时通知或个性化推荐。 4. **交互反馈**:例如,当用户点击一个链接后,JavaScript可以改变导航条上的...

    jquery简单实现鼠标经过导航条改变背景图

    这篇教程主要讲解如何使用jQuery来实现一个简单的交互效果:当鼠标经过导航条的各个链接时,改变背景图片。首先,我们需要了解HTML、CSS和jQuery这三个关键元素。 HTML(HyperText Markup Language)是网页的基础...

    jQuery鼠标经过滑动展开菜单代码

    "jQuery鼠标经过滑动展开菜单代码"是一种常见的增强用户体验的技巧,特别是在导航菜单设计中。这个特效允许用户只需将鼠标悬停在菜单项上,就能平滑地展开下级菜单,使得网站的导航更加直观和便捷。以下是对这个技术...

    jQuery仿flash导航条鼠标悬停上下文字滑动

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。"jQuery仿flash导航条鼠标悬停上下文字滑动"是一种利用jQuery库实现的动态效果,旨在提升用户体验,使得导航条更加生动有趣。在...

    鼠标经过文字下划线导航菜单 html5

    在网页设计中,导航菜单是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。本文将深入探讨如何使用HTML5、CSS和JavaScript实现一个动态的鼠标经过文字下划线导航菜单,以及其变色效果。 首先,我们从...

    几个经典的导航条,css+div+js写的,个人收集

    3. **动态加载**:结合Ajax,可以实现导航条链接不刷新页面的情况下加载内容,提高用户体验。 4. **动画效果**:利用`setTimeout`或`requestAnimationFrame`添加延迟或帧动画,增强导航条的交互反馈。 在提供的...

    css3滑动导航条鼠标悬停高亮显示

    在网页设计中,导航条是不可或缺的元素,它帮助用户在网站中轻松浏览各个页面。随着技术的发展,CSS3引入了许多新的特性和功能,使得我们可以创建出更具动态效果和交互性的导航条。本文将深入探讨如何使用CSS3实现...

    背景跟随鼠标移动的导航条

    在这个例子中,`$(document).mousemove`函数监听文档的鼠标移动事件,获取到鼠标的当前位置(`event.pageX`和`event.pageY`),然后使用`.css()`方法改变导航条的位置。计算的`top`和`left`值保证了导航条始终位于...

    jQuery鼠标悬停上下滑动导航条.zip

    本项目“jQuery鼠标悬停上下滑动导航条”提供了一种创新且美观的解决方案,利用jQuery库来实现鼠标悬停时导航条的动态上下滑动效果,提升用户体验。以下是关于这个特效的一些关键知识点: 1. **jQuery库**:jQuery ...

    鼠标滑动导航菜单.zip

    2. 编写CSS样式:为导航条和链接设置基础样式,并定义滑动动画的关键帧(keyframes)。 3. 编写jQuery代码:监听鼠标事件,如`mouseover`和`mouseout`,根据事件触发相应的CSS类切换,从而启动或停止动画。 这种...

    jQuery鼠标悬停动画导航条.zip

    在网页设计中,导航条是不可或缺的部分,它帮助用户轻松浏览网站的不同页面。"jQuery鼠标悬停动画导航条"是一个利用JavaScript库jQuery实现的交互式导航菜单,它为用户提供了一种动态、吸引人的用户体验。本项目的...

    鼠标经过文字下划线导航菜单.zip

    【HTML源码-网站菜单】中的“鼠标经过文字下划线导航菜单”是一种常见的网页交互设计,用于提升用户体验。在网页设计中,导航菜单是帮助用户在网站中快速定位和跳转的重要元素。这种设计模式在鼠标悬停时对菜单项...

Global site tag (gtag.js) - Google Analytics