<%@ page contentType="text/html; charset=GBK"%>
<html >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS实现导航条功能</title>
<style type="text/css">
<!--
body {
font-family: verdana, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
#container
{
width: 830px;
padding: 1px;
border: 1px solid #ccc;
background: #fff;
}
#tabnav
{
height: 10px;
margin: 0;
padding-left: 0px;
background: url(../images/tableft10.gif) repeat-x bottom;
}
#tabnav ul
{
margin:0;
padding:0px 0px 0px 0px;
list-style:none;
}
#tabnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
font-color:#f00;
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #000000;
text-decoration: none;
border-bottom: 1px solid #000000;
color: #03c;
}
#tabnav a span {
float:left;
display:block;
background: url(../images/tabright10.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabnav a span {float:none;}
/* End IE5-Mac hack */
#tabnav a:hover span {
color:#FFF;
}
#tabnav a:hover {
background-position:0% -42px;
}
#tabnav a:hover span {
background-position:100% -42px;
}
//-->
</style>
<script type="text/javascript">
<!--
function hiddenContent(name){
for(i=1;i<11;i++){
document.getElementById("content1").style.display="block";
var contentString="content"+i;
var nums=10+i;
var contentStr="content"+nums;
var content=document.getElementById(contentString);
var mycontents=document.getElementById(contentStr);
if(name==contentString){
content.style.display="block";
mycontents.style.background="#aabbcc";
}
else{
content.style.display="none";
mycontents.style.background="#8BB531";
}
}
}
//-->
</script>
</head>
<body onload="Reset()">
<table width="100%" align="center">
<div id="container">
<ul id="tabnav">
<li><a id="content11" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content1');" >导航条元素1</a></li>
<li><a id="content12" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content2');" >元素2</a></li>
<li><a id="content13" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content3');" >元素3</a></li>
<li><a id="content14" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content4');" >元素4</a></li>
<li><a id="content15" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content5');" >元素5</a></li>
<li><a id="content16" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content6');" >元素6</a></li>
<li><a id="content17" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content7');" >元素7</a></li>
<li><a id="content18" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content8');" >元素8</a></li>
<li><a id="content19" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content9');" >元素9</a></li>
<li><a id="content20" onfocus="blur()" href="#" onclick="javascript:hiddenContent('content10');" >元素10</a></li>
</ul>
<table width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
</table>
<div id="content1" style="display: block">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2</font>
</td>
</tr>
</table>
</div>
<!--4-->
<div id="content2" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号1</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知1</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容11</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容22</font>
</td>
</tr>
</table>
</div>
<div id="content3" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号2</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知2</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容222</font>
</td>
</tr>
</table>
</div>
<!-- 5 -->
<div id="content4" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号3</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知3</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2222</font>
</td>
</tr>
</table>
</div>
<!--6 -->
<div id="content5" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号5</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知5</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容11111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容22222</font>
</td>
</tr>
</table>
</div>
<!-- 7 -->
<div id="content6" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号6</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知6</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容222222</font>
</td>
</tr>
</table>
</div>
<!-- 8 -->
<div id="content7" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号7</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知7</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2222222</font>
</td>
</tr>
</table>
</div>
<!-- 9 -->
<div id="content8" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号8</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知8</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容11111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容22222222</font>
</td>
</tr>
</table>
</div>
<!-- 9 -->
<div id="content9" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号9</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知9</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容111111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容222222222</font>
</td>
</tr>
</table>
</div>
<!-- 10 -->
<div id="content10" style="display: none">
<table bgcolor="#DBE5E9" width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr align="center">
<td colspan=4 >
<font color='red'>序号10</font>
</td>
<td colspan=4>
<font color='red'>具体说明及须知10</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第一:</font>
</td>
<td colspan=4>
<font color='red'>内容1111111111</font>
</td>
</tr>
<tr align="center">
<td colspan=4>
<font color='red'>第二: </font>
</td>
<td colspan=4>
<font color='red'>内容2222222222</font>
</td>
</tr>
</table>
</div>
</div>
<table width="100%" align="center" border="1" cellspacing="0" cellpadding="0" style='font-size:13px;' bordercolorlight="#98B6E8" bordercolordark="#FFFFFF">
<tr>
<td >常规显示的内容</td>
<td >常规显示的内容1</td>
</tr>
<tr>
<td >常规显示的内容2</td>
<td >常规显示的内容3</td>
</tr>
<tr>
</table>
</table>
</body>
</html>
- div.rar (1.8 KB)
- 描述: 可以将各个<div>下面的元素换成自己的一个大的ActionForm的一部份！
这样就不必要将一个FORM放到一个页面中那么难看，同时也实现了类似浏览器上[工具]->[Internet选项]->[常规][安全]这样的功能！
- 下载次数: 32
分享到：
相关推荐
鼠标滑过导航条背景变色 DIV+CSS网页导航条
网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js
我下载了多个div+css的导航条实例代码，在xp上不能实现鼠标动态下拉，在实例－－现代教务管理系统，中提取了这个实例，特与大家共享
一个非常好用的DIV+CSS无限级导航条.代码简洁.
html源码标签，div+css导航条源码，www.020fphs.com网址的更新导航！div+css教程使用！
div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式
第一步：规划网站，本教程将以图示为例构建网站； ... 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等；...第九步：导航条的制作(较难)； 第十步：解决IE浏览器的显示BUG；
DIV+CSS仿京东商城导航条,rar,导航，商城，京东
DIV+CSS仿京东商城导航条! 值得下载看看!资源免费,大家分享!!
前面介绍了Web标准的基本概念，及其实现的基本...采用DIV+CSS可以很快实现页面布局，而且在页面设计和维护时都带来了极大的方便。本章将使用一个简单的实例，介绍DIV+CSS页面方式的简单设计过程，希望借此能抛砖引玉。
用DIV+CSS仿照www.zhubajie.com的导航，为大家参考学习
几个经典的导航条，css+div+js写的，个人收集
DIV+CSS导航栏,里面有很多种导航条.
值得推荐4款DIV+CSS网页首页导航条菜单（绝对漂亮）例子
很普通的一个导航条，不同之处是只采用了一张背景图片。
DIV+CSS基础教程：导航条的制作详解.docx
MAC样式的水平导航条，采用(DIV+CSS)布局的方式，大家赶快下载吧
本文实例讲述了DIV+CSS实现仿京东商城导航条效果。...这里演示了DIV+CSS实现仿京东商城导航条功能代码，鼠标滑过导航条选项即可弹出对应的子菜单列表，界面简洁大方。 运行效果截图如下： 在线演示地址如下： ...