tab 選項卡的封裝

2021-08-14 12:22:33 字數 1320 閱讀 7779

html部分

lang="en">

charset="utf-8">

titletitle>

input

.active

#tabbox

div

style>

head>

id="tabbox">

type="button"

value="遊戲"

class="active">

type="button"

value="旅行">

type="button"

value="**">

style="display: block">芳華div>

澳大利亞div>

yellowdiv>

div>

body>

html>

第一種方法:面向過程的寫法

window.onload = function

() this.classname = 'active';

tabdiv[this.index].style.display='block';}}

}

第二種方法: 物件導向的寫法

window.onload = function

() ;

function

tab(id,btn,content) ;}}

tab.prototype.clickbtn = function

(btn)

btn.classname = 'active';

this.tabdiv[btn.index].style.display = 'block';

}

封裝成乙個通用的tab.js,使用tab切換的時候直接引用就可以

引數說明 :第乙個引數是整個tab切換最外層的id名,第二個引數是切換按鈕的標籤名,第三個引數是要切換內容的標籤名,我們在呼叫的時候要首先建立乙個tab這個物件,然後再呼叫這個構造行數;例如:  var tab = new tab('tabbox','input' , 'div');

function tab(id,btn,content) ;}}

tab.prototype.clickbtn = function (btn)

btn.classname = 'active';

this.tabdiv[btn.index].style.display = 'block';

}

tab 標籤選項卡

1.css body,div,ul,li body a link a visited a hover ul tab2 menubox menubox ul menubox li menubox li.hover contentbox 2.頁面 div 新聞列表1 wang wangding wang...

實現Tab選項卡

今天自己在做選項卡的時候,想實現tab欄的背景和顏色隨著索引值改變,開始想的思路是想用css實現,當滑鼠hover上去的實現改變背景,自己覺得不太好,又說不出個所以然,想著前兩天在網易雲看的課程,現在有了用處。最後用js實現 下面是 選項卡 title link rel stylesheet hre...

tab選項卡切換問題

今天做了乙個tab選項卡切換的編碼,寫完,可以自動切換,但是滑鼠移入再移除,不再自動切換,看了就才發現是這裡出錯了 window.nl ad function change index 2000 auto function change curindex lists curindex classna...