html+css+javascript程式設計實戰專案及心得
阿新 • • 發佈：2018-12-23
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實踐題 - 選項卡</title> <style type="text/css"> /* CSS樣式製作 */ *{ /*清除所有預設的內外邊距，設定字型格式*/ margin:0; padding:0; font-size:15px; font-family:"微軟雅黑"; } ul{ list-style-type:none;/* 所有的list選項都沒有前面的點 */ } a{ text-decoration:none;/* 所有的連線都沒有下劃線 */ color:black; } .main{/*這是選項卡最外層包裹的div*/ width:310px;/*定義大小*/ height:200px; margin:0 auto;/*這樣能夠居中*/ margin-top:15px; } #titleCard{/*這是選項的ul*/ border-bottom:2px solid #8B4513;/*設定底邊框*/ width:302px;/*寬度，注意這個寬度的設定要與下面content寬度的設定相對應*/ height:32px;/*高度，這個高度要考慮ul的border-bottom能夠與它裡面的li的border-bottom重合的問題*/ } #titleCard li{ display:inline-block;/*li本身是豎排的，這個屬效能夠讓它們橫著排列*/ border:1px solid black; border-bottom:none;/*無底邊線,被選中的li才有底邊線*/ width:70px; height:30px;/*這個高度與ul的高度相關，要能底邊重合才行。*/ text-align:center;/*文字水平居中*/ line-height:30px;/*文字的行高與容器高度相同能夠讓文字垂直居中*/ margin-left:5px; } #titleCard li.liActive{/*當li被選中時，把className設定成這個類名。注意這個類名的定義方式，必須把#titleCard li.加上才能夠生效，我估計是因為要比總體的格式定義更細，才能夠對區域性生效。*/ border-top:2px solid #8B4513;/*被選中的li上面的邊框加粗，變色*/ border-bottom:2px solid white;/*下面的邊框變白色，加粗，剛好能夠覆蓋住ul的底邊，顯得有缺口的樣子*/ } #titleCard li:hover{ cursor:pointer; /*由於沒有用<a>標籤，所以這裡用這個來讓滑鼠在移動到li上之後，能夠變成點選手的樣子*/ } #content div{/*下面三個具體內容的div*/ width:300px; /*注意這個寬度與上面ul的寬度是對應的*/ height:150px; border:1px solid green;/*左右邊距的寬度要算到總寬度裡面去*/ border-top:none; /*頂上無邊框*/ } #content div ul li { line-height:2em; text-indent:8px;/*文字縮排*/ } .show{ display:block; /*顯示*/ } .hide{/*隱藏，並不佔地方*/ display:none; /*visibility:hidden 這種隱藏佔地方*/} </style> <script type="text/javascript"> // JS實現選項卡切換 window.onload = function(){
//獲得titleCard的子標籤陣列，該變數會一直存在，不會因為onload執行結束而消失，神奇！
var titleCardChildren=document.getElementById("titleCard").children; //獲得content的子標籤陣列，該變數會一直存在，不會因為onload執行結束而消失，神奇！ var contentChildren=document.getElementById("content").children; //alert(); for(var i=0;i<titleCardChildren.length;i++) {
//為每個titleCard的子標籤新增index屬性，記錄該li的序號
titleCardChildren[i].index=i; titleCardChildren[i].onclick=function(){//為每個li新增onclick方法，每當這個li被點選時，就會執行這個方法裡面的內容 for(var j=0;j<contentChildren.length;j++)//遍歷content的子標籤 { contentChildren[j].className="hide";//將所有的content的子標籤都隱藏 titleCardChildren[j].className="";//將所有titleCard的子標籤的className值都去掉 } contentChildren[this.index].className="show";//顯示被點選的這個content子標籤 titleCardChildren[this.index].className="liActive";//改變被點選的titleCard的子標籤的css } } } </script> </head> <body><!-- HTML頁面佈局 --> <div class="main"> <ul id="titleCard"> <li class="liActive">房產</li><li>家居</li><li>二手房</li> </ul><!--titleCard end--> <div id="content"> <div class="show"> <ul> <li><a href="#">275萬購昌平鄰鐵三居 總價20萬買一居</a></li> <li><a href="#">200萬內購五環三居 140萬安家東三環</a></li> <li><a href="#">北京首現零首付樓盤 53萬購東5環50平</a></li> <li><a href="#">京樓盤直降5000 中信府 公園樓王現房</a></li> </ul> </div><!--show end--> <div class="hide"> <ul> <li><a href="#">40平出租屋大改造 美少女的混搭小窩</a></li> <li><a href="#">經典清新簡歐愛家 90平老房煥發新生</a></li> <li><a href="#">新中式的酷色溫情 66平撞色活潑家居</a></li> <li><a href="#">瓷磚就像選好老婆 衛生間煙道的設計</a></li> </ul> </div><!--hide end--> <div class="hide"> <ul> <li><a href="#">通州豪華3居260萬 二環稀缺2居250w甩</a></li> <li><a href="#">西3環通透2居290萬 130萬2居限量搶購</a></li> <li><a href="#">黃城根小學學區僅260萬 121平70萬拋!</a></li> <li><a href="#">獨家別墅280萬 蘇州橋2居優惠價248萬</a></li> </ul> </div><!--hide end--> </div><!--content end--> </div><!-- main end --> </body> </html>