tab 切换写法

2024-04-11 21:32:54

<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);
};

最新文章

热门文章