課程
/前端開發
/JavaScript
/Tab選項卡切換效果
為什么我的實現不了呢?
2017-05-10
源自:Tab選項卡切換效果 1-5
正在回答
window.onload=function(){
? ? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ? ? var titls=document.getElementById("menu").getElementsByTagName("p");
? ? ? ? var uls=document.getElementById("menu").getElementsByTagName("ul");
? ? ? ? // 遍歷所有要點擊的標題且給它們添加索引及綁定事件
? ?if(titls.length=uls.length){
? ? ? ?for(var i=0;i<titls.length;i++){
? ? ? ? ? ?titls[i].id=i;
? ? ? ? ? console.log(titls[i]); //遍歷顯示3個p元素
? ? ? ? ? ?titls[i].onclick=function(){
? ? ? ? ? ? console.log(titls[i]); ? //undefined ?到這里就已經不能指向原來的p元素了
? ? ? ? ? ? for(var j=0;j<uls.length;j++){ ?//此處仍然需要對所有ul元素進行設置
? ? ? ? ? ? uls[j].style.display = 'none';
? ? ? ? ? ? }
? ? var ul = this.parentNode.querySelector('ul');
? ? ul.style.display = 'block';
? ? ? ? ? ? /*if(uls[this.id].style.display="block"){ ? ?沒有遍歷,只能對一個元素進行設置
? ? ? ? ? ? ? ? ? uls[this.id].style.display="none" ;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ?uls[this.id].style.display="block";
? ? ? ? ? ? } */
? ? ? ? ? ?} ?
? ? ? ?}
//當然還有的錯誤是你各種大括號小括號寫錯了
}
? ? }
舉報
本課程詳細介紹網頁頁面中最流行常用的tab切換效果
2 回答為什么當我刪除了這一段代碼效果就不顯示了呢?
2 回答為什么不顯示?
1 回答為什么我的timer 是undefined呢?
2 回答為什么在瀏覽器顯示報錯是這個括號的呢?括號會有什么問題?
3 回答為什么我把this.id換成i結果就不對了?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-05-10
window.onload=function(){
? ? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ? ? var titls=document.getElementById("menu").getElementsByTagName("p");
? ? ? ? var uls=document.getElementById("menu").getElementsByTagName("ul");
? ? ? ? // 遍歷所有要點擊的標題且給它們添加索引及綁定事件
? ?if(titls.length=uls.length){
? ? ? ?for(var i=0;i<titls.length;i++){
? ? ? ? ? ?titls[i].id=i;
? ? ? ? ? console.log(titls[i]); //遍歷顯示3個p元素
? ? ? ? ? ?titls[i].onclick=function(){
? ? ? ? ? ? console.log(titls[i]); ? //undefined ?到這里就已經不能指向原來的p元素了
? ? ? ? ? ? for(var j=0;j<uls.length;j++){ ?//此處仍然需要對所有ul元素進行設置
? ? ? ? ? ? uls[j].style.display = 'none';
? ? ? ? ? ? }
? ? var ul = this.parentNode.querySelector('ul');
? ? ul.style.display = 'block';
? ? ? ? ? ? /*if(uls[this.id].style.display="block"){ ? ?沒有遍歷,只能對一個元素進行設置
? ? ? ? ? ? ? ? ? uls[this.id].style.display="none" ;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ?uls[this.id].style.display="block";
? ? ? ? ? ? } */
? ? ? ? ? ?} ?
? ? ? ?}
//當然還有的錯誤是你各種大括號小括號寫錯了
}
? ? }