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

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

    博客分类：
  • JSP
CSSJavaScriptXHTMLHTML 
阅读更多

用到的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
踩
分享到：
| portal概念（名词解释）（入门篇）
评论
发表评论

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

相关推荐

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

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