原生JS寫選項卡

2021-08-03 13:47:55 字數 1546 閱讀 4951

封裝兩個方法deleteclass;addclass

//給元素新增classname

function addclass(elem,value)else

}//給元素刪除classname

function deleteclass(elem,value)

}

html**

id="tabs">

id="lists">

class="abc active">房產li>

class="abc">家居li>

class="abc">二手房li>

ul>

class="hide active">

275萬購昌平鄰鐵三居 總價20萬買一居br>

200萬內購五環三居 140萬安家東三環br>

北京首現零首付樓盤 53萬購東5環50平br>

京樓盤直降5000 中信府 公園樓王現房br>

div>

class="hide active">

40平出租屋大改造 美少女的混搭小窩br>

經典清新簡歐愛家 90平老房煥發新生br>

新中式的酷色溫情 66平撞色活潑家居br>

瓷磚就像選好老婆 衛生間煙道的設計br>

div>

class="hide">

通州豪華3居260萬 二環稀缺2居250w甩br>

西3環通透2居290萬 130萬2居限量搶購br>

黃城根小學學區僅260萬 121平70萬拋!br>

獨家別墅280萬 蘇州橋2居***248萬br>

div>

div>

body>js**

// js實現選項卡切換

window.onload = function

()else

}//給元素刪除classname

function

deleteclass

(elem,value)

}for(var i =0,len = tabs_lis.length; ifunction

() addclass(this,"active");

addclass(tabs_divs[this.index],"active")}}

}

css**

/* css樣式製作 */

原生js選項卡

275萬購昌平鄰鐵三居 總價20萬買一居 200萬內購五環三居 140萬安家東三環 北京首現零首付樓盤 53萬購東5環50平 京樓盤直降5000 中信府 公園樓王現房 40平出租屋大改造 美少女的混搭小窩 經典清新簡歐愛家 90平老房煥發新生 新中式的酷色溫情 66平撞色活潑家居 瓷磚就像選好老婆 ...

用js寫簡單選項卡

如圖,最簡單的純粹的選項卡 第一步,當然是先寫html 和css樣式 doctype html html head meta charset gb2312 title 無標題文件 title style body,ul,li ul,li wrap hide tab t tab t li tab t ...

選項卡套選項卡

實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換,且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器,乙個控制外層選卡,乙個控制內層選卡。仔細分析發現,外層選項卡的切換是需要在內層選卡全部切換完...