码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 几种简单的tabel切换

时间:2015-12-31 12:31:14      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:

技术分享


方法一: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>

JavaScript 几种简单的tabel切换

标签:

原文地址:http://www.cnblogs.com/CaktyRiven/p/5090965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!