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


  • 相关阅读:
    C#double类型转换string类型
    数据分析测试
    第三周进度
    质量属性战术——可用性战术
    开学第二周进度报告
    开学第一周进度报告
    质量属性的六个常见属性场景
    架构漫谈有感03
    架构漫谈有感02
    读架构漫谈有感--软件架构师如何工作
  • 原文地址:https://www.cnblogs.com/Alan2016/p/6259262.html
Copyright © 2011-2022 走看看