`
younglibin
  • 浏览: 1193327 次
  • 性别: 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概念（名词解释）（入门篇）
评论
发表评论

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

相关推荐

    左侧菜单栏控制右侧页面内容切换

    本demo所需技术：jQuery+Bootstrap 本demo所用工具：IDEA 本demo主要实现功能： 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示

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

    使用原生js获取浏览器可是高度，滚动条高度，监听滚动条，滑动时 触发 改变导航元素位置，和子元素样式，适合新手参考借鉴！

    jquery鼠标悬浮改变图片插件

    我自己写的，与dreamweaver自带的插入鼠标经过图像和导航条功能相比，好处有三个，一是独立js文件，保持HTML页面整洁，二是调用比dreamweaver方便很多，加快了写代码的速度，三是变化图片根据文件夹区分，文件名保持...

    绿色极简的CSS导航条 菜单代码分享.rar

    绿色极简的CSS导航条 菜单代码分享，支持鼠标动作，鼠标放在菜单上，菜单背景色改变，深绿色与淡绿色相结合的清新菜单风格，纯CSS代码实现，用了一些图片来修饰菜单背景，这款菜单的样式比较经典，可通用于多种类型...

    ajax手风琴式导航栏

    1.使用ajax的accordion控件来进行导航，每次只可展开一个折叠面板； 2.展开后，鼠标移至每一个td时，td改变颜色，移开后，恢复颜色； 3.有效的accordion样式，绝对可利用。

    jquery鼠标悬浮改变图片插件(含注释)

    我自己写的，与dreamweaver自带的插入鼠标经过图像和导航条功能相比，好处有三个: 一是独立js文件，保持HTML页面整洁; 二是调用比dreamweaver方便很多，加快了写代码的速度; 三图片根据文件夹区分，文件名保持...

    vue实现中部导航栏布局功能

    这里是要求在页面上部分滚动范围内，导航栏一直在div的上部，随着鼠标的滚动而改变位置。到下部分滚动范围，导航栏就一直固定到页面的上部分。 这里需要注意两个地方 这里需要一个覆盖不了的区域，可以给人一种更好...

    Vue实现导航栏点击当前标签变色功能

    主要为大家详细介绍了Vue实现导航栏点击当前标签变色功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    jQuery实现导航栏头部菜单项点击后变换颜色的方法

    主要介绍了jQuery实现导航栏头部菜单项点击后变换颜色的方法,涉及jQuery响应鼠标事件针对页面元素的遍历及属性变换相关操作技巧,需要的朋友可以参考下

    javascript网页特效实例大全

    5.4 鼠标经过时改变文本颜色 99 5.5 鼠标驱动图片变化 100 5.6 鼠标悬停时背景色改变 101 5.7 鼠标右键弹出对话框 102 5.8 鼠标的图片旋转跟踪 103 5.9 旋转的鼠标光环 105 5.10 跟随鼠标旋转的文字 107 5.11...

    作业-歌帝梵官网首页.zip

    置顶导航：在页面的顶部设置一个固定位置的导航栏，在用户滚动页面时保持导航栏始终可见，方便用户快速浏览和访问网站其他页面。 视频播放：在首页适当位置插入一个视频播放器，用于展示相关的宣传视频或产品介绍...

    javascript网页特效实例大全（8-12）

    实例221　当鼠标经过图片时显示图片　344 实例222　改变图片获取焦点时的状态　345 实例223　抖动的图片　346 实例224　鼠标移动放大图片　347 8.3　图片与时间相关操作　349 实例225　定时隐藏图片　349 实例226　...

    WPF编程宝典 part2

    第Ⅵ 窗口、页面和富控件 第23章 窗口 639 23.1 Window类 639 23.1.1 显示窗口 641 23.1.2 定位窗口 642 23.1.3 保存和还原窗口位置 642 23.2 窗口交互 644 23.2.1 窗口所有权 646 23.2.2 对话框模型 647 23.2.3 ...

    基于JS代码实现导航条弹出式悬浮菜单

    采用弹出式悬浮菜单，不但可以使网站的导航内容更加清晰，而且不影响页面的整体效果。运行本实例，如图1所示，当鼠标移动到一级导航菜单的标题上时，将弹出悬浮菜单显示该菜单对应的子菜单，鼠标移出时，将隐藏悬浮...

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

    19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML文件 19.23 Kill Excel的进程 第20章 调用操作系统的应用 20.1 Javascript操作剪贴板 20.2 打开硬盘驱动器 20.3 单击加入收藏夹 20.4 复制...

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

    19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML文件 19.23 Kill Excel的进程 第20章 调用操作系统的应用 20.1 Javascript操作剪贴板 20.2 打开硬盘驱动器 20.3 单击加入收藏夹 20.4 复制...

    JavaScript网页特效范例宝典源码

    第1章 窗口/框架与导航条设计 1 1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 ...

    AutoPlay_Menu_Builder6.0.1328注册版

    　工具提示当移动鼠标到动作控件上方时，可以弹出一条工具提示，并且可以使用漂亮的自定义风格替换系统默认的工具提示风格。 　使用自定义工具提示使用自定义风格的工具提示，不选定则使用系统默认的工具提示风格。 ...

    AutoPlay_Menu_Builder5.5.0.1328注册版

    　工具提示当移动鼠标到动作控件上方时，可以弹出一条工具提示，并且可以使用漂亮的自定义风格替换系统默认的工具提示风格。 　使用自定义工具提示使用自定义风格的工具提示，不选定则使用系统默认的工具提示风格。 ...

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