tab 切换写法
Posted 佛陀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab 切换写法相关的知识，希望对你有一定的参考价值。
<script>
var oUL = document.getElementById(‘aboutTab-ul‘);
var oLi = oUL.getElementsByTagName(‘li‘);
var oDiv = document.getElementById(‘aboutTab-content‘);
var oContent = oDiv.querySelectorAll(‘.tab-content‘);
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
oLi[i].onclick = function() {
for (var i = 0; i < oLi.length; i++) {
oLi[i].className = ‘‘;
oContent[i].className = ‘tab-content‘;
}
this.className = ‘cur‘;
oContent[this.index].className += " active";
}
}
</script>
//第二种写法
var oUL = document.getElementById(‘foodTab-ul‘);
var oLi = oUL.getElementsByTagName(‘li‘);
var oDiv = document.getElementById(‘foodTab-content‘);
var oContent = oDiv.querySelectorAll(‘.tab-content‘);
for (var i = 0; len = oLi.length, i < len; i++) {
oLi[i].index = i;
oLi[i].onclick = (function(i) {
return function() {
for (var i = 0; i < oLi.length; i++) {
oLi[i].className = ‘‘;
oContent[i].className = ‘tab-content‘;
}
this.className = ‘cur‘;
oContent[this.index].className += " active";
};
})(i);
};
以上是关于tab 切换写法的主要内容，如果未能解决你的问题，请参考以下文章