啃筆記

 

方法1

1.在HTML內a標籤上用onclick 事件 ，在function 內代入參數
2.頁籤內容上加上與a標籤對應的id名稱( 與function相同的第二個參數)

function openTab(event, tabName) {
	var i, tabcontent, megaTablink;
	tabcontent = document.querySelector(".megaTab").getElementsByClassName("tabContent");
	for (i = 0; i < tabcontent.length; i++) {
		tabcontent[i].className = tabcontent[i].className.replace(" open", "");
	}	
	megaTablink = document.querySelector(".megaTab").getElementsByClassName("megaTab-link");
	for (i = 0; i < megaTablink.length; i++) {
		megaTablink[i].className = megaTablink[i].className.replace(" active", "");
	}
	var tabName = document.getElementById(tabName);
	tabName.className += " fade open";
	event.target.className += " active";
}

 

方法2

1.var一個tabList變數取得頁籤項目名稱的數量
2.var一個tabContent變數取得頁籤項目內容的數量
3.function內使用for迴圈分別跑 頁籤名稱與頁籤內容，將所有for迴圈跑過的className設定為預設狀態
4.加上e.preventDefault();取消a標籤預設行為(當滑鼠按下時，瀏覽器捲軸會跳至最上方。加上後可取消這行為)
5.var一個tabListId變數取得頁籤項目名稱id。e.target.getAttribute("href")為取得a標籤href。將e.target.getAttribute("href") 指向前面var的頁籤項目名稱id變數
6.var一個tabContentStatus變數，將第5步驟的變數代入此變數
7.當點選頁籤項目名稱時，tabListId會取得當下點選的內容的href
8.將tabContentStatus.className 等於 "tabContent fade open"，頁籤內容開啟的狀態
9.將e.target..className 等於 "nav__item__title active"，頁籤名稱點選後的狀態
10.最後使用for迴圈跑tabList頁籤名稱數量，在for迴圈內加入click事件監聽

//tab name
var tabList = document.querySelectorAll(".normal .nav__item__title");

//tab content
var tabContent = document.querySelectorAll(".normal .tabContent");
function currentStatus(e){
	e.preventDefault();
	for(var a=0;a<tabList.length;a++){		
		tabList[a].className = "nav__item__title";
		tabContent[a].className = "tabContent fade";
	}
	var tabListId = e.target.getAttribute("href");
	var tabContentStatus = document.querySelector(tabListId)
	tabContentStatus.className = "tabContent fade open";	
		e.target.className = "nav__item__title active"
}
for(var i=0;i<tabList.length;i++){
	tabList[i].addEventListener("click",currentStatus)	
}