이 글은 탭 개발에 대한 간단한 예제(코드)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
다음 방법이 사용됩니다. changetabhandle 함수는 메소드 1-3
//当前点击按钮的索引 function changeTabHandle(n) { for(var i=0; i<tabList.length; i++){ tabList[i].className = ''; pList[i].className = ''; } tabList[n].className = 'active'; pList[n].className = 'active'; }
custom 속성 이름 이름
//方法一:自定义属性方法 console.log(tabList); for (var i = 0;i < tabList.length; i++){ tabList[i]._f_index = i; tabList[i].onclick = function () { console.dir(this); changeTabHandle(this._f_index); } }es6 let
//方法二:var --> let for(let i=0; i<tabList.length; i++){ tabList[i].onclick = function() { changeTabHandle(i); } }clossodmethod one :
for(var i=0; i<tabList.length; i++){ ~function (i) { tabList[i].onclick = function () { changeTabHandle(i); } }(i) }method two :
for(var i=0; i<tabList.length; i++){ tabList[i].onclick = function (i) { return function() { changeTabHandle(i); } }(i) }memory the the thane memory 모두 지우는 대신 선택한 항목 + 사용자 정의 속성
beforeIndex = 0; for(var i=0; i<tabList.length; i++){ tabList[i]._f_index = i; tabList[i].onclick = function() { tabList[beforeIndex].className = ''; pList[beforeIndex].className = ''; tabList[this._f_index].className = 'active'; pList[this._f_index].className = 'active'; beforeIndex = this._f_index; } }지난번에 모두 지우는 대신 선택한 항목의 메모리 +let
for(let i=0; i<tabList.length; i++){ tabList[i].onclick = function (params) { tabList[beforeIndex].className = ''; pList[beforeIndex].className = ''; tabList[i].className = 'active'; pList[i].className = 'active'; beforeIndex = i; } }github 예제 코드 https://github.com/fung-yu/js. .
의 탭 섹션
위 내용은 탭 개발의 간단한 예(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!