国产超碰无码最新上传剧情,高清一级婬片a级中文字幕,在线中文字幕二三区

　一個(gè)簡(jiǎn)潔的管理菜單

作者：lalasxc 　時(shí)間： 2008-05-12　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

五一在家寫的，和大家分享，支持所有瀏覽器,添加了左側(cè)菜單點(diǎn)擊變色效果：

運(yùn)行代碼框
<!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>無(wú)標(biāo)題文檔</title> <style type="text/css"> body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} #top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;} #topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left} #topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;} #main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;} #leftMenu{width:150px;height:500px;background-color:#009900;float:left} #leftMenu ul{margin:10px;} #leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;} #leftMenu ul li a{color:#000000;text-decoration:none;} #content{width:750px;height:500px;float:left} .content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;} #footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;} .content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;} </style> <script type="text/javascript"> window.onload=function(){ function $(id){return document.getElementById(id)} var menu=$("topTags").getElementsByTagName("ul")[0];//頂部菜單容器 var tags=menu.getElementsByTagName("li");//頂部菜單 var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左側(cè)菜單 var j; //點(diǎn)擊左側(cè)菜單增加新標(biāo)簽 for(i=0;i<ck.length;i++){ ck[i].onclick=function(){ $("welcome").style.display="none"http://歡迎內(nèi)容隱藏 clearMenu(); this.style.background="yellow"; //循環(huán)取得當(dāng)前索引 for(j=0;j<8;j++){ if(this==ck[j]){ if($("p"+j)==null){ openNew(j,this.innerHTML);//設(shè)置標(biāo)簽顯示文字 } clearStyle(); $("p"+j).style.backgroundColor="yellow"; clearContent(); $("c"+j).style.display="block"; } } return false; } } //增加或刪除標(biāo)簽 function openNew(id,name){ var tagMenu=document.createElement("li"); tagMenu.id="p"+id; tagMenu.innerHTML=name+"   "+"<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>"; //標(biāo)簽點(diǎn)擊事件 tagMenu.onclick=function(evt){ clearMenu(); ck[id].style.background="yellow"; clearStyle(); tagMenu.style.backgroundColor="yellow"; clearContent(); $("c"+id).style.display="block"; } //標(biāo)簽內(nèi)關(guān)閉圖片點(diǎn)擊事件 tagMenu.getElementsByTagName("img")[0].onclick=function(evt){ evt=(evt)?evt:((window.event)?window.event:null); if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行為; this.parentNode.parentNode.removeChild(tagMenu);//刪除當(dāng)前標(biāo)簽 var color=tagMenu.style.backgroundColor; //設(shè)置如果關(guān)閉一個(gè)標(biāo)簽時(shí)，讓最后一個(gè)標(biāo)簽得到焦點(diǎn) if(color=="#ffff00"||color=="yellow"){//區(qū)別瀏覽器對(duì)顏色解釋 if(tags.length-1>=0){ clearStyle(); tags[tags.length-1].style.backgroundColor="yellow"; clearContent(); var cc=tags[tags.length-1].id.split("p"); $("c"+cc[1]).style.display="block"; clearMenu(); ck[cc[1]].style.background="yellow"; } else{ clearContent(); clearMenu(); $("welcome").style.display="block" } } } menu.appendChild(tagMenu); } //清除菜單樣式 function clearMenu(){ for(i=0;i<ck.length;i++){ ck[i].style.background="#99CC00"; } } //清除標(biāo)簽樣式 function clearStyle(){ for(i=0;i<tags.length;i++){ menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00"; } } //清除內(nèi)容 function clearContent(){ for(i=0;i<7;i++){ $("c"+i).style.display="none"; } } } </script> </head> <body> <div id="top"> <h2>管理菜單</h2> <div id="topTags"> <ul> </ul> </div> </div> <div id="main"> <div id="leftMenu"> <ul> <li>個(gè)人資料</li> <li>相冊(cè)管理</li> <li>日志管理</li> <li>留言管理</li> <li>風(fēng)格管理</li> <li>系統(tǒng)管理</li> <li>幫助信息</li> </ul> </div> <div id="content"> <div id="welcome" class="content" style="display:block;"> <div align="center"> <p> </p> <p><strong>歡迎使用用戶管理系統(tǒng)！</strong></p> <p> </p> </div> </div> <div id="c0" class="content">個(gè)人資料</div> <div id="c1" class="content">相冊(cè)管理</div> <div id="c2" class="content">日志管理</div> <div id="c3" class="content">留言管理</div> <div id="c4" class="content">風(fēng)格管理</div> <div id="c5" class="content">系統(tǒng)管理</div> <div id="c6" class="content">幫助信息</div> </div> </div> <div id="footer">copyright for lalasxc </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2851793-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2008/5768.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

background-clip/origin一則運(yùn)用

flash實(shí)例:打造佛光效果

通過(guò)實(shí)例學(xué)習(xí)AS3.0——案例五

通過(guò)實(shí)例學(xué)習(xí)AS3.0——案例四

通過(guò)實(shí)例學(xué)習(xí)AS3.0——案例三


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx