JavaScript+CSS實現經典的樹形導航欄
阿新 • • 發佈：2019-01-12
在一些管理系統裡面，一般右側都會有樹形的導航欄，點選一下就會出現下拉選單，顯示出來該父選單下面的子選單
專案，然後配以圖片，和CSS的效果，可以說是非常常用的功能，現在做一個專案，正好用到這個功能，於是到處尋找
資料，從Struts的Dojo外掛到Dojo的學習，各種看，結果各種不懂。那個悲催啊！！！結果從頭再來，苦學CSS和JS，
雖然現在JS水平不咋的，但是還是可以寫出一個一般的導航選單欄了，自己看看還是說的過去，這裡拿出來Show一
下，回來自己好用。
首先上最開始的左側選單HTML程式碼
<!DOCTYPE html><html> <head> <title>left.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content 然後是對應的CSS檔案
#sidenav{ width: 300px;}.show{ display:block; width:190px; }.hidden{ display:none; background-color: white;}.fold{ width:20px; height:40px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat;}.fold1{ width:20px; height:40px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat;}.fold1 a{ font-size: 12px; background-image:url("/HTML/img/title.jpg"); padding-left: 30px; padding-right:50px; padding-top:55px; text-align: center;}.expend{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat; }.2blank{ width:20px; background-color: white;}a:LINK { text-decoration: none;}a:HOVER { color: red;}a:VISITED { color: gray;}.img1 img{ width: 1326px; height: 90px;}然後是JavaScript程式碼
function changevisible(element){ var children = element.parentNode.childNodes; for(var i= 0; i<children.length;i++){ if(children[i].nodeName == "DIV"){ var className = children[i].className; if(className == "show" ){ // element.className="fold"; children[i].className="hidden"; } else{ // element.className="expend"; children[i].className="show"; } } } }然後再放上一個整體的介面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>all.html</title> </head> <frameset rows="20%,*" frameborder="no"> <frame src="/HTML/test/top.html"/> <frameset cols="15%,*" frameborder="yes"> <frame src="/HTML/test/left.html" noresize="noresize"/> <!-- frame裡面有一個name屬性，用來表名屬性來進行超連結替換 --> <frame src="/HTML/test/right.html" noresize="noresize" name="right"/> </frameset> </frameset> </html>效果圖
再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智慧的隊伍中來！https://blog.csdn.net/jiangjunshow