高仿藍色理想網站的導航功能表

來源:互聯網
上載者:User
關鍵字 網頁製作 Ajax JavaScript

<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:84px;


height:28px;


line-height:28px;


font-size:12px;


color:#FFFFFF;


border:3px solid #ffffff;


background-color:#86C2FF;


text-align:center;


display:block;


cursor:pointer;


}


#subMenu{


background-color:#0000FF;


width:500px;


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 ShowMenu()


{


var barCTT=document.getElementById("dNavBar")


var liArr=barCTT.getElementsByTagName("li")


var links=new Array()


links[0]="<a href=HTTP://www.jzread.com>當前位置:首頁"


links[1]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a> | <a href=HTTP://www.jzread.com>專案三</a> | <a href=HTTP://www.jzread.com>專案四</a>"


links[2]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a> | <a href=HTTP://www.jzread.com>專案三</a>"


links[3]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a> | <a href=HTTP://www.jzread.com>專案三</a> | <a href=HTTP://www.jzread.com>專案四</a> | <a href=HTTP://www.jzread.com>專案五</a>"


links[4]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a>"


links[5]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a> | <a href=HTTP://www.jzread.com>專案三</a>"


links[6]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a>"


links[7]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a>"


links[8]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a>"


links[9]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a>"


links[10]="<a href=HTTP://www.jzread.com>專案一</a>| <a href=HTTP://www.jzread.com>專案二</a>"


links[11]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</a>"


links[12]="<a href=HTTP://www.jzread.com>專案一</a> | <a href=HTTP://www.jzread.com>專案二</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="#86C2FF";


allLi[i].style.height="28px";


if (indexObj==allLi[i])


{


index=i;


}


}


indexObj.style.borderBottom="0px solid #666688";


indexObj.style.backgroundColor="#0000FF";


indexObj.style.height="31px";


document.getElementById("subMenu").innerHTML=infoArr[index];


}


</script>


<body onLoad="ShowMenu()">


<div id="dNavBar" style="float:none; width:560px;" ><li>首頁</li><li>娛樂快報</li><li>音樂天地</li><li>極品FLASH</li>


</div>


<div id="subMenu">站務公告</div>


</body>


</html>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.