Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-10 12:46:03

选项卡导航条选项卡选项卡特效网站导航条

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<style type="text/css">
#dNavBar{
background-color:#ffffff;
}
#dNavBar li{
list-style-type:none;
float:left;
width:85px;
height:28px;
line-height:28px;
font-size:12px;
color:#FFFFFF;
border:3px solid #ffffff;
background-color:#333;
text-align:center;
display:block;
cursor:pointer;
}
#subMenu{
background-color:#f30;
width:621px;
border-left:3px solid #ffffff;
border-right:3px solid #ffffff;
height:29px;
line-height:29px;
color:#FFFFFF;
font-size:12px;
padding-left:10px;
}
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
a:link {
 color: #FFFFFF;
 text-decoration: none;
}
a:hover{
 color: #FFFFFF;
 text-decoration: none;
}
a:visited{
 color: #FFFFFF;
 text-decoration: none;
}
</style>
<script language="javascript">
function iniPage()
{
 var barCTT=document.getElementById("dNavBar")
 var liArr=barCTT.getElementsByTagName("li")
 var links=new Array()
 links[0]="<a href='#'>内容一</a>"
 links[1]="<a href='#'>内容二</a>"
 links[2]="<a href='#'>内容三</a>"
 links[3]="<a href='#'>内容四</a>"
 links[4]="<a href='#'>内容五</a>"
 links[5]="<a href='#'>内容六</a>"
 links[6]="<a href='#'>内容七</a> "
 for (i=0;i<liArr.length;i++)
 {
  liArr[i].onclick=function()
  {
   selectThis(this,liArr,links)
  }
 }
}
function selectThis(indexObj,allLi,infoArr)
{
 var index=0;
 for (i=0;i<allLi.length;i++)
 {
  allLi[i].style.border="3px solid #ffffff";
  allLi[i].style.backgroundColor="#333";
  allLi[i].style.height="28px";
  if (indexObj==allLi[i])
  { 
   index=i;
  }
 }
 indexObj.style.borderBottom="0px solid #f30";
 indexObj.style.backgroundColor="#f30";
 indexObj.style.height="31px";
 document.getElementById("subMenu").innerHTML=infoArr[index];
}
</script>
<body onLoad="iniPage()">
<div id="dNavBar"><li>菜单一</li><li>菜单二</li><li>菜单三</li><li>菜单四</li>
<li>菜单五</li><li>菜单六</li><li>菜单七</li>
</div>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： CSS特效代码-韩国风格菜单.

下一篇文章：网站导航菜单

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

经典横向导航菜单

推荐阅读：

相关代码：

标签分类