js 的小效果 選項卡

2022-03-31 13:47:36 字數 1412 閱讀 3625

js選項卡

按鈕1按鈕2

按鈕3div1

div2

div3

選項卡:     1.按鈕和內容的個數是對應[相等]的;   

2.當前選中的按鈕有選中狀態;其他按鈕沒有狀態   

3.和當前選中的按鈕對應的元素顯示,其他的元素隱藏;

選項卡步驟;     1.先做按鈕:       

1>.先清空所有按鈕的classname;          

for(var i = 0; i < abtn.length; i++){               

abtn[i].classname = '';

2>.當前點選的按鈕加選中的狀態[classname];           

this.classname = 'active';          

2.把按鈕和div關聯起來;         

1>.隱藏所有的元素             

for(var i = 0; i < adiv.length; i++){               

adiv[i].style.display = 'none';           

2>.和當前按鈕對應的div顯示;           

adiv[this.index].style.display = 'block';

------->此文**

按鈕1按鈕2

按鈕3div1

div2

div3

選項卡:     1.按鈕和內容的個數是對應[相等]的;   

2.當前選中的按鈕有選中狀態;其他按鈕沒有狀態   

3.和當前選中的按鈕對應的元素顯示,其他的元素隱藏;

選項卡步驟;     1.先做按鈕:       

1>.先清空所有按鈕的classname;          

for(var i = 0; i < abtn.length; i++){               

abtn[i].classname = '';

2>.當前點選的按鈕加選中的狀態[classname];           

this.classname = 'active';          

2.把按鈕和div關聯起來;         

1>.隱藏所有的元素             

for(var i = 0; i < adiv.length; i++){               

adiv[i].style.display = 'none';           

2>.和當前按鈕對應的div顯示;           

adiv[this.index].style.display = 'block';

------->此文**

js,選項卡效果

css樣式 parent parent span wrap span wrap span span wrap span.focus ul wrap ul wrap ul ul wrap ul first child ul wrap ul li ul wrap ul li ajs樣式 function...

JS 選項卡效果案例

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

選項卡效果

html html lang en head meta charset utf 8 title title title style main span p active style head body div id main span class active 第乙個 span span 第二個 s...