用js寫簡單選項卡
如圖,最簡單的純粹的選項卡
第一步,當然是先寫html程式碼和css樣式
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> <style> body,ul,li{margin:0; padding:0; font:12px/1.5 arial;} ul,li{list-style:none;} .wrap{width:500px; margin:20px auto;} .hide{display:none;} #tab_t{height:25px;border-bottom:1px solid #ccc;} #tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer} #tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;} #tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style> </head> <body> <div class="wrap"> <ul id="tab_t"> <li class="act">選擇1</li> <li>選擇2</li> <li>選擇3</li> <li>選擇4</li> </ul> <divid="tab_c"> <div>內容1</div> <div class="hide">內容2</div> <div class="hide">內容3</div> <div class="hide">內容4</div> </div> </div> </body> </html>
第二步,實現簡單的切換效果
要點1:abc.document.getElementsByTagName("li"):取得abc下面的所有標籤為li的元素,返回的是一個元素集合,有陣列的一些屬性。
要點2:迴圈,先迴圈給li加上onclick事件,再onlink事件點選的時候,再迴圈讓所有選項卡的act樣式去掉,所有的內容隱藏。然後讓所點選的選項及對應內容顯示。
要點3:tab_t_li[i].index = i; 在迴圈時,給選項卡加一個額外的屬性並賦值,以做選項卡和內容的對應。
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> <style> body,ul,li{margin:0; padding:0; font:12px/1.5 arial;} ul,li{list-style:none;} .wrap{width:500px; margin:20px auto;} .hide{display:none;} #tab_t{height:25px;border-bottom:1px solid #ccc;} #tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer} #tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;} #tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style> <script> window.onload = function(){ var tab_t = document.getElementById("tab_t"); var tab_t_li = tab_t.getElementsByTagName("li"); var tab_c = document.getElementById("tab_c"); var tab_c_li = tab_c.getElementsByTagName("div"); var len = tab_t_li.length; var i=0; for(i=0; i<len; i++){ tab_t_li[i].index = i; tab_t_li[i].onclick = function(){ for(i=0; i<len; i++){ tab_t_li[i].className = ''; tab_c_li[i].className = 'hide'; } tab_t_li[this.index].className = 'act'; tab_c_li[this.index].className = ''; } } } </script> </head> <body> <div class="wrap"> <ul id="tab_t"> <li class="act">選擇1</li> <li>選擇2</li> <li>選擇3</li> <li>選擇4</li> </ul> <div id="tab_c"> <div>內容1</div> <div class="hide">內容2</div> <div class="hide">內容3</div> <div class="hide">內容4</div> </div> </div> </body> </html>
第三步,寫成函式。上面的寫法只能一個頁面用一個選項卡,如果再加一個的話,就需要複製一份,再改很多變數名。
要點:tab_t_li[i][evt] 因為傳值的時候是字串,如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執行不了的,tab_t_li["onclick"]這樣執行沒問題。
好了,現在一個頁面上就可以有多個切換了,只需要呼叫函式的時候,寫上相應的id名和標籤名,事件名稱就可以了
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> <style> body,ul,li{margin:0; padding:0; font:12px/1.5 arial;} ul,li{list-style:none;} .wrap{width:500px; margin:20px auto;} .hide{display:none;} #tab_t{height:25px;border-bottom:1px solid #ccc;} #tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer} #tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;} #tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style> <script> window.onload = function(){ tab("tab_t","li","tab_c","div","onmouseover") function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){ var tab_t = document.getElementById(tab_t); var tab_t_li = tab_t.getElementsByTagName(tab_t_tag); var tab_c = document.getElementById(tab_c); var tab_c_li = tab_c.getElementsByTagName(tag_c_tag); var len = tab_t_li.length; var i=0; for(i=0; i<len; i++){ tab_t_li[i].index = i; tab_t_li[i][evt] = function(){ for(i=0; i<len; i++){ tab_t_li[i].className = ''; tab_c_li[i].className = 'hide'; } tab_t_li[this.index].className = 'act'; tab_c_li[this.index].className = ''; } } } } </script> </head> <body> <div class="wrap"> <ul id="tab_t"> <li class="act">選擇1</li> <li>選擇2</li> <li>選擇3</li> <li>選擇4</li> </ul> <div id="tab_c"> <div>內容1</div> <div class="hide">內容2</div> <div class="hide">內容3</div> <div class="hide">內容4</div> </div> </div> </body> </html>
相關推薦
用js寫簡單選項卡
如圖,最簡單的純粹的選項卡 第一步,當然是先寫html程式碼和css樣式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> &
用js寫簡單頁面
var username=document.getElementsByClassName("username")[0]; var pwd=document.getElementsByClassName("password")[0]; v
原生js寫一個選項卡
html程式碼: <h2 class="active">選項卡1</h2> <h2>選項卡2</h2> <h2>選項卡3</h2>
寫個選項卡用bootstrap 幾行程式碼就搞定了
<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#A" data-toggle="tab"> A選項卡
怎麽用cookie做一個選項卡?
eight splay i++ 作用 code round tab 多網站 個性化 什麽是cookie? Cookies雖然一般都以英文名呈現,但是它還是有一個可愛的中文名“小甜餅”。Cookies是指服務器暫存放在你的電腦裏的txt格式的文本文件資料,主要用
js原生實現選項卡功能
doc pre pan element gre rip class isp height 結構:<div id="box"> <input type="button" value="書籍" class="on"> <in
js常用特效——選項卡效果
weight ont pad absolut cursor asc spa cto clear 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset
原生js三種選項卡效果(輪播)
col val 還在 log pla absolut 自動播放 div pac 第三種:定時輪播切換(我這邊定時是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8"
原生js三種選項卡效果(點擊)
eight void log utf 觸發 nts lin type position 第一種:選項卡單擊點擊切換 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g
原生js三種選項卡效果(滑動)
window solid nts html opacity ont cor rip show 第二種:鼠標移入切換效果實現 <!DOCTYPE html> <html> <head> <meta charset
純JS制作選項卡--JavaScript實例集錦(初學)
不用 () body tel bsp classname nload html spl 最近重新從最基礎學習JavaScript,如同蓋房,先要打好基礎,一磚一瓦都很重要。 下面我來嘚吧幾句,附上從書上學到的實例與效果。 JS可以用面向過程去寫,也可以使用面向對象。面向對象
Jquery實現簡單選項卡
gre 第一個 tex PE 一個 back remove jquery splay <html> <head> <meta charset="UTF-8"> <title>選項卡</title> <scr
用JS寫,根據用戶輸入的年月份判斷是這年的第幾天
nth || AD lse quest 輸入 判斷 ear 月份 console.log("輸入年份:"); let year = readline.question() - 0; console.log("輸入一個月份"); let month = readline.q
用js寫水仙花數
amp == 位數 等於 parse lse div 就是 () ...js //輸入一個三位數,水仙花數就是個位的三次方+十為的三次方+百位的三次方之和等於本身 console.log(‘請輸入一個三位數:‘); let a = readline.question(
簡單選項卡
選項 html 當前 上海 scrip mage 獲取 演員 pan 簡單選項卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
用js寫tab頁面
原理:依據bootStrap框架的tab頁樣式:原生態的是這樣: <!DOCTYPE html> <html> <head> <me
js實現tab選項卡切換
通過原生js實現tab切換,首先講解一下實現的原理。 1.點選按鈕首先給這個被點選的按鈕新增一個active類,給點選的改變背景色 2.點選按鈕其實就是把相應的div給顯示出來。 需要注意的是,點選按鈕,給按鈕添加了一個類和把對應的div給顯示,需要把上一個點選的按鈕顏色還原
原生js實現tab選項卡切換功能
本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s
用js寫一個秒錶
首先,先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input onclick="ks()" type="button" name="" id="kaishi" value
用js寫一個秒表
tel 我們 java name func 取余 NPU 定時器1 cli 首先,先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input o