JavaScript 几种简单的table切换 


方法一：for循环+if判断当前点击与自定义数组是否匹配
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        button {
            width:120px;
            height: 32px;
            line-height: 32px;
            background-color: #ccc;
            font-size: 24px;
        }
        div {
            display: none;
            width:200px;
            height: 200px;
            font-size: 72px;
            color:#ddd;
            background-color: green;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <button style="background-color: yellow;">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <div style="display:block;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script type="text/javascript">
    //定义数组并获取数组内各个的节点
    var buttonArr = document.getElementsByTagName("button");
    var divArr = document.getElementsByTagName("div");
    for(var i = 0; i < buttonArr.length;i++) {
        buttonArr[i].onclick = function() {
            //this 
            // alert(this.innerHTML)
           //for循环遍历button数组长度
            for(var j = 0; j < buttonArr.length; j++) {
                //重置所有的button样式
                buttonArr[j].style.backgroundColor = "#ccc";
                //给当前的(点击的那个)那个button添加样式
                this.style.backgroundColor = "yellow";
                //隐藏所有的div
                divArr[j].style.display = "none";
                //判断当前点击是按钮数组中的哪一个？
                if(this == buttonArr[j]) {
                    // alert(j);
                     //显示点击按钮对应的div
                    divArr[j].style.display = "block";
                }
            }
        }
    }
    </script>
</body>
</html>

方法二：自定义index为当前点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        button {
            width:120px;
            height: 32px;
            line-height: 32px;
            background-color: #ccc;
            font-size: 24px;
        }
        div {
            display: none;
            width:200px;
            height: 200px;
            font-size: 72px;
            color:#ddd;
            background-color: green;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <button style="background-color: yellow;">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <div style="display:block;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script type="text/javascript">
    var buttonArr = document.getElementsByTagName("button");
    var divArr = document.getElementsByTagName("div");
    for(var i = 0; i < buttonArr.length;i++) {
        buttonArr[i].index = i;
        // buttonArr[i].setAttribute("index",i);
        buttonArr[i].onclick = function() {
            for(var j = 0; j < buttonArr.length; j++) {
                buttonArr[j].style.backgroundColor = "#ccc";
                buttonArr[this.index].style.backgroundColor = "yellow";
                divArr[j].style.display = "none";
                divArr[this.index].style.display = "block";
            }
        }
    }
    
    </script>
</body>
</html>
 
方法三：className





<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style type="text/css">
        * {padding:0; margin:0;}
        button {
            background-color: #ccc;
            width:80px;
            height: 30px;
        }
        .btn-active {
            background-color: yellow;
            font-weight:bold;
            font-size: 14px;
        }
        div{
            width:200px;
            height: 200px;
            font-size: 64px;
            background-color: #0c0;
            display: none;
            color:#fff;
        }
        .div-active {
            display: block;
        }
    </style>
</head>
<body>
    <button class="btn-active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <div class="div-active">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script type="text/javascript">
    //1.先获取元素
    var buttonList = document.getElementsByTagName("button");
    var divList = document.getElementsByTagName("div");
    //2.添加事件
    for(var i = 0; i < buttonList.length; i++) {
        buttonList[i].index = i;
        buttonList[i].onclick = function() {
            for(var j = 0; j < buttonList.length;j++) {
                buttonList[j].className = "";
                divList[j].className = "";
            }
            this.className = "btn-active";
            divList[this.index].className = "div-active";
        }
    }
    </script>
</body>
</html>






方法四：className+匿名函数的自执行！闭包





<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style type="text/css">
        * {padding:0; margin:0;}
        button {
            background-color: #ccc;
            width:80px;
            height: 30px;
        }
        .btn-active {
            background-color: yellow;
            font-weight:bold;
            font-size: 14px;
        }
        div{
            width:200px;
            height: 200px;
            font-size: 64px;
            background-color: #0c0;
            display: none;
            color:#fff;
        }
        .div-active {
            display: block;
        }
    </style>
</head>
<body>
    <button class="btn-active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <div class="div-active">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script type="text/javascript">
    //1.先获取元素
    var buttonList = document.getElementsByTagName("button");
    var divList = document.getElementsByTagName("div");
    //2.添加事件
    for(var i = 0; i < buttonList.length; i++) {
        (function(i){ //匿名函数自执行
             buttonList[i].onclick = function() {
                for(var j = 0; j < buttonList.length;j++) {
                    buttonList[j].className = "";
                    divList[j].className = "";
                }
                this.className = "btn-active";
                divList[i].className = "div-active";
            }
        })(i)
    }
    </script>
</body>
</html>









            

            
posted @ 
2015-12-31 11:07 
riven.lcs 
阅读(8485) 
评论(2) 
编辑 
收藏 
举报