zoukankan      html  css  js  c++  java
  • 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);
    };


  • 相关阅读:
    团队冲刺第五天
    单词统计包括其续
    团队冲刺第四天
    团队冲刺第三天
    团队冲刺第二天
    团队冲刺第一天
    软件工程第九周总结
    软件工程第八周总结
    《大道至简》阅读笔记二
    《大道至简》阅读笔记一
  • 原文地址:https://www.cnblogs.com/Alan2016/p/6259262.html
Copyright © 2011-2022 走看看