選項卡（1）
阿新 • • 發佈：2017-11-01
lec set 樣式 gin relative ctype ive css樣式 lac
選項卡控件它提供一系列操作按鈕，單擊不同的按鈕可以在各個頁面之間進行切換。
選項卡實現的幾種方法：
html+css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; list-style:none; box-sizing:border-box; } body{ padding:20px; } .tabs{ width:650px; position:relative; background:#aaf; } .tabs li{float:left; } .tabs input[type=radio]{/*隱藏單選框的樣式*/ position:absolute; top:-9999px; left:-9999px; } .tabs label{ display:block; border:1px solid #000; padding:10px; text-align:center; border-radius:6px 6px 0 0 ; background:#aaf; border-bottom:1px solid transparent; position:relative; top:4px; z-index:3; transition:all 0.2s ease-in-out; } .tabs label:hover{ background:#bbf; } .tabs .tab_content{ width:100%; background:#faf; height:200px; position:absolute; top:43px; left:0px; z-index:2; border:1px solid #000; padding:10px; display:none; } .tabs input[type=radio]:checked + label{ top:0px; padding-top:14px; background:#faf; } .tabs input[type=radio]:checked ~ div[id^=tab_content]{ display:block; } </style> </head> <body> <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked/> <label for="tab1">選擇卡1</label> <div class="tab_content" id="tab_content1"> <p>選項卡1的內容</p> </div> </li> <li> <input type="radio" name="tabs" id="tab2"/> <label for="tab2">選擇卡2</label> <div class="tab_content" id="tab_content2"> <p>選項卡2的內容</p> </div> </li> </ul> </body> </html>
html+css+js實現切換效果
基本思路：首先編寫HTML，然後再加載樣式，最後用JS修改相應的DOM，達到更改選項卡和內容的目的。
HTML頁面布局
HTML顯示的是所有與文字有關的信息，所以在這個頁面中與文字有關的信息為上面選項卡的三個標題，以及選項卡的內容。
於是決定標題使用<ul> <li>布局，內容使用<div>布局。
CSS樣式
要制作成上圖所示的選項卡樣式，幾個地方需要註意：
1、整個選項卡的樣式設置
2、選項卡標題的樣式設置
3、選項卡內容的樣式設置
4、只能顯示一個選項卡的內容，其他選項卡內容隱藏。
JavaScript實現選項卡切換
1、需要獲取選項卡標題和選項卡內容
2、選項卡內容有三個，需要循環遍歷來操作，得知哪個選項卡和哪個選項內容匹配。
3、通過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab切換</title> <style> *{ padding: 0px; margin: 0px; } body{ margin: 80px; } ul{ list-style: none; } #tab{ border: 1px solid #dddddd; width: 498px; height: 130px; } #tab-header{ height: 38px; background-color: #f7f7f7; position: relative; } .tab-header ul{ width: 501px; position: absolute; left: -1px; } .tab-header ul li{ float: left; width: 98px; height: 38px; line-height: 38px; text-align: center; padding: 0px 1px; border-bottom: 1px solid #dddddd; } #tab-header ul li.selected{ background-color: white; border-bottom: 0px; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; padding: 0px; } .tab-header ul li:hover{ font-weight: bold; color: orangered; } #tab-content ul{ margin-top: 10px; } a{ color: black; text-decoration: none; } #tab-content li{ float: left; width: 220px; margin: 10px; } #tab-content a:hover{ color: orangered; } #tab-content .dom{ display: none; } </style> </head> <body> <div id="tab"> <div id="tab-header" class="tab-header"> <ul> <li class="selected">公告</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> <script> function $(id) { return typeof id === ‘string‘ ? document.getElementById(id) : id; } window.onload = function () { var lis = $(‘tab-header‘).getElementsByTagName(‘li‘); var content = $(‘tab-content‘).getElementsByClassName(‘dom‘); if (lis.length != content.length) return; for (var i = 0; i < lis.length; i++){ var li = lis[i]; li.id = i; li.onmousemove = function () { for (var j = 0; j < lis.length; j++){ lis[j].className = ‘‘; content[j].style.display = ‘none‘; } this.className = ‘selected‘; content[this.id].style.display = ‘block‘; } } } </script> </body> </html>
選項卡（1）