課程
/前端開發(fā)
/JavaScript
/Tab選項(xiàng)卡切換效果
多練習(xí)才會多明白
2014-11-25
源自:Tab選項(xiàng)卡切換效果 1-5
正在回答
window.onload=function(){
? ? ? // 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來
? ? ? var titles=document.getElementById('menu').getElementsByTagName('p');
? ? ? var uls=document.getElementById('menu').getElementsByTagName('ul');
? ? ?// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
? ? ? for(var i=0;i<titles.length;i++){
? ? ? ? ? titles[i].dex=i;
? ? ? ? ? titles[i].onclick=function(){
? ? ?// 獲取點(diǎn)擊的標(biāo)題上的索引屬性,根據(jù)該索引找到對應(yīng)的列表
? ? ? ? ? ? var uldis=uls[this.dex].style.display;
? ? ?// 判斷該列表,如果是顯示的則將其隱藏,如果是隱藏的則將其顯示出來
? ? ? ? ? ? if (uldis=='none'){
? ? ? ? ? ? ? ? uls[this.dex].style.display='block';
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? uls[this.dex].style.display='none';
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? }
}
舉報(bào)
本課程詳細(xì)介紹網(wǎng)頁頁面中最流行常用的tab切換效果
1 回答我想應(yīng)該是對的吧~
3 回答不一樣的效果
1 回答鼠標(biāo)滑過如果放在上面不動(dòng),切換之后過兩秒又開始自動(dòng)切換了?做完之后的效果是應(yīng)該這樣嗎?
1 回答老師,那個(gè) ul{ width:301px;} 應(yīng)該改成width:300px吧。
2 回答如果內(nèi)容的DIV里面還有很多DIV,這樣遍歷的DIV和li就不對應(yīng)了,應(yīng)該怎么解決呢?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-03-04
window.onload=function(){
? ? ? // 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來
? ? ? var titles=document.getElementById('menu').getElementsByTagName('p');
? ? ? var uls=document.getElementById('menu').getElementsByTagName('ul');
? ? ?// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
? ? ? for(var i=0;i<titles.length;i++){
? ? ? ? ? titles[i].dex=i;
? ? ? ? ? titles[i].onclick=function(){
? ? ?// 獲取點(diǎn)擊的標(biāo)題上的索引屬性,根據(jù)該索引找到對應(yīng)的列表
? ? ? ? ? ? var uldis=uls[this.dex].style.display;
? ? ?// 判斷該列表,如果是顯示的則將其隱藏,如果是隱藏的則將其顯示出來
? ? ? ? ? ? if (uldis=='none'){
? ? ? ? ? ? ? ? uls[this.dex].style.display='block';
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? uls[this.dex].style.display='none';
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? }
}