HTML Tab選項卡
阿新 • • 發佈：2018-12-25
我要做的效果如圖所示：
程式碼如下：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項卡</title> <link href="css/index.css" rel="stylesheet"> <script src="js/index.js" type="text/javascript"></script> </head> <body> <!--選項卡--> <div id="tab"> <!--選項的頭部--> <div id="tab-header"> <ul> <li class="selected">公告</li> <li>規則</li> <li>完美</li> <li>功勞</li> <li>產品</li> <!--<li>技術</li>--> </ul> </div> <!--主要內容--> <div id="tab-content"> <div class="dom" style="display: block;"> <ul> <li><a href="#">資料七夕:金牛愛送玫瑰</a></li> <li><a href="#">阿里打造"網際網路監管"</a></li> <li><a href="#">10萬家店60萬新品</a></li> <li><a href="#">全球最大網上時裝週</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#">“全額返現”要管控啦</a> </li> <li> <a href="#">淘寶新規釋出彙總(7月)</a> </li> <li> <a href="#">炒信規則調整意見反饋</a> </li> <li> <a href="#">質量相關規則近期變更</a> </li> </ul> </div> <div class="dom"> <ul> <li> <a href="#">阿里建商家全鏈路服務</a> </li> <li> <a href="#">個性化的消費時代來臨</a> </li> <li> <a href="#">跨境貿易是中小企業機</a> </li> <li> <a href="#">美妝行業虛假資訊管控</a> </li> </ul> </div> <div class="dom"> <ul> <li> <a href="#">接次檔案，毀了一家店</a> </li> <li> <a href="#">賬號安全神器阿里錢盾</a> </li> <li> <a href="#">新版阿里110上線了</a> </li> <li> <a href="#">賣家學違禁避免被處罰</a> </li> </ul> </div> <div class="dom"> <ul> <li> <a href="#">為了公益high起來</a> </li> <li> <a href="#">魔豆媽媽線上申請</a> </li> </ul> </div> </div> </div> </body> </html>
index.css
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{ padding: 0; margin: 0; } a{ color: black; text-decoration: none; } ul{ list-style: none; } #tab{ width: 498px; height: 130px; border: 1px solid #ddd; box-shadow: 0 0 2px #ddd; margin: 100px 0 0 100px; /*處理超出的內容*/ overflow: hidden; } /*選項卡的頭部*/ #tab-header{ background-color: #F7F7F7; height: 33px; text-align: center; position: relative; } #tab-header ul{ width: 500px; position: absolute; left: -1px; } #tab-header ul li{ float: left; width: 98px; height: 33px; line-height: 33px; padding: 0 1px; border-bottom: 1px solid #dddddd; } #tab-header ul li.selected{ background-color: white; font-weight: bolder; border-bottom: 0; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; padding: 0; } #tab-header ul li:hover{ color: orangered; } /*主要內容*/ #tab-content .dom{ display: none; } #tab-content .dom ul li{ float: left; /*background-color: red;*/ margin: 15px 10px; width: 225px; } #tab-content .dom ul li a:hover{ color: orange; }
index.js
// == 值比較 === 型別比較 $(id) ----> document.getElementById(id) function $(id){ return typeof id === 'string' ? document.getElementById(id):id; } // 當頁面載入完畢 window.onload = function(){ // 拿到所有的標題(li標籤) 和 標題對應的內容(div) var titles = $('tab-header').getElementsByTagName('li'); var divs = $('tab-content').getElementsByClassName('dom'); // 判斷 if(titles.length != divs.length) return; // 遍歷 for(var i=0; i<titles.length; i++){ // 取出li標籤 var li = titles[i]; li.id = i; // console.log(li); // 監聽滑鼠的移動 li.onmousemove = function(){ for(var j=0; j<titles.length; j++){ titles[j].className = ''; divs[j].style.display = 'none'; } this.className = 'selected'; divs[this.id].style.display = 'block'; } } }