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

younglibin

浏览: 1194932 次
性别:
来自: 北京

最近访客更多访客>>

u010277881

Asdpboy

yhtppp

java_dotar_01

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS JavaScript XHTML HTML

用到的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概念（名词解释）（入门篇）

2010-01-04 16:30
浏览 2983
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

基于三层感知机实现手写数字识别-内含源码和说明书.zip: 基于三层感知机实现手写数字识别-内含源码和说明书.zip

setuptools-40.7.0.zip: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

搭建VGG16神经网络实现图像分类-内含源码和说明书.zip: 搭建VGG16神经网络实现图像分类-内含源码和说明书.zip

setuptools-40.6.1.zip: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

华为OD机试D卷 - 判断字符串子序列 - 免费看解析和代码.html: 私信博主免费获取真题解析以及代码

安享智慧理财测试项目Mock服务代码: 安享智慧理财测试项目Mock服务代码

基于STM32单片机的智能晾衣架.zip: 基于单片机的系统

Mamba selective-scan-cuda-linux-gnu.so: 安装成功后，还是遇到ImportError xxxx selective_scan_cuda.cpython-xxx-linux-gnu.so undefined symbol，用此编译好的文件进行替换即可

基于Java EE的停车场管理系统.zip: 如今，我国现代化发展迅速，人口比例急剧上升，在一些大型的商场，显得就格外拥挤，私家车的数量越来越多，商场停车难得问题凸显，对于停车场的合理利用有助于缓解用户停车压力，鉴于这样的背景；初步设定系统功能主要包括，用户信息管理，违规车辆信息管理，刷卡停车牌管理，停车位信息管理，停车计费，信息查看管理等功能模块。本系统采用JAVAEE开发形式，利用数据库来完成数据存储功能，运用了B/S形式的开发模式，严格按照了软件工程的开发模式进行开发，保证系统的良好运行。

华为OD机试D卷 - 免单统计 - 免费看解析和代码.html: 私信博主免费获取真题解析以及代码

setuptools-2.2.tar.gz: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

ASP.NET《数据库原理及应用技术》课程指导平台的开发(源代码): ASP.NET《数据库原理及应用技术》课程指导平台的开发(源代码)

setuptools-40.4.2.zip: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

setuptools-54.0.0-py3-none-any.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

基于SpringBoot+Hadoop的评价预测系统的设计与实现+部署文档+全部资料高分项目.zip: 【资源说明】基于SpringBoot+Hadoop的评价预测系统的设计与实现+部署文档+全部资料高分项目.zip基于SpringBoot+Hadoop的评价预测系统的设计与实现+部署文档+全部资料高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。欢迎下载，沟通交流，互相学习，共同进步！

利用python的pyautogui函数实现简单的自动化操作: 1.安装python3.4以上版本，并配置环境变量（目前有装3.9遇到坑的，我个人用的3.7.6）教程：https://www.runoob.com/python3/python3-install.html 2.安装依赖包方法：在cmd中（win+R 输入cmd 回车）输入 pip install pyperclip 回车 pip install xlrd 回车 pip install pyautogui==0.9.50 回车 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 回车 pip install pillow 回车这几步如果哪步没成功，请自行百度如 pip install opencv-python失败 3.把每一步要操作的图标、区域截图保存至本文件夹 png格式（注意如果同屏有多个相同图标，回默认找到最左上的一个，因此怎么截图，截多大的区域，是个学问，如输入框只截中间空白部分肯定是不行的，宗旨就是“唯一”） 4.在cmd.xls 的sheet1 中，配置每一步的指令，如指

setuptools-8.0.4.tar.gz: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

setuptools-18.7.1.zip: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

setuptools-20.6.7.zip: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

华为OD机试D卷 - 数据单元的变化替换 - 免费看解析和代码.html: 私信博主免费获取真题解析以及代码

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

javaweb项目RuntimeException不能默认打印到控制台

CSS 中 # 和 . 的区别

在网页右下角弹出提示窗口（完整实例）+参数说明

固定（冻结 ）table第一行的列名

图片 的超链接带边框

<td>……</td>里的字数100，只显示其中20个

css实现页面文字不换行、自动换行、强制换行

页面在不同屏幕分辨率下存在的问题及解决办法

struts2 标签展示 map

JSP中Servlet生命周期

JSP中response对象

JSP中request对象

JSP的动态导入和静态导入

JSP 的 九 个内置对象

JSP 的七个动作指令

JSP 的三个编译指令

JSP页面跳转大全

Tree 元素列表一览

JSP页面元素详解

最近访客更多访客>>

固定（冻结）table第一行的列名

图片的超链接带边框

JSP 的九个内置对象