欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DIV+CSS实现导航条功能 博客分类: DIV+CSS篇章 CSSHTML 

程序员文章站 2024-03-23 15:25:22
...
<%@ 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
相关标签: CSS HTML