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