js实现选项卡切换的三种方式

最新推荐文章于 2024-04-30 16:57:21 发布

dianxianju8602

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量424

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/caozong/p/5777893.html

版权

前两种主要实现一个选项卡的切换，第三种使用闭包看书，构造函数实现多个选项卡的切换：

1.第一种实现实现效果为：

实现代码为：

<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>tab切换</title>
    <style type="text/css">
        * {
            font: normal 15px "微软雅黑";
            color: #000;
        }

        ul {
            list-style-type: none;
            padding-left: 5px;
            margin-bottom: -2px
        }

        a {
            text-decoration: none;
        }

        p {
            display: block;
            margin: 10px
        }

        li {
            display: inline-block;
            border: 1px solid #999;
            border-bottom: 2px solid #a00;
            background: #fff;
            text-align: center;
            width: 60px;
            height: 30px;
            margin: 0 1px;
            line-height: 30px
        }

        ul .active {
            border-top: 2px solid #a00;
            border-bottom: 2px solid #fff;
        }

        #content {
            margin: 0;
            border: 1px solid #ccc;
            border-top: 2px solid #a00;
            width: 300px
        }

        #content div {
            display: none
        }

        #content .active {
            display: block;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li name="a" οnclick="tab(this)" class="active"><a href="#">房产</a></li>
        <li name="a" οnclick="tab(this)"><a href="#">家居</a></li>
        <li name="a" οnclick="tab(this)"><a href="#">二手房</a></li>
    </ul>
    <div id="content">
        <div class="active" name="con">
            <p>20jf钢带机额戴鸿慈贷款放款l</p>

            <p>20jf钢带机额戴鸿慈贷款放款l</p>

            <p>20jf钢带机额戴鸿慈贷款放款l</p>
        </div>
        <div name="con">
            <p>nvmllllmlddnlv来的都来l</p>

            <p>戴绿帽没vvmdslnv</p>

            <p>的女凯迪拉克vk</p>
        </div>
        <div name="con">
            <p>发V</p>

            <p>叉路口积分卡很多可没</p>

            <p>奉公如法</p>
        </div>
    </div>
</div>
<script type="text/javascript">

    var li_arr = document.getElementsByTagName("li");
    var div_arr = document.getElementsByName("con");
    var len = li_arr.length;

    function tab(obj) {
        for (var i = 0; i < len; i++) {
            if (li_arr[i] == obj) {
                li_arr[i].setAttribute("class", "active");
                div_arr[i].setAttribute("class", "active");
            } else {
                li_arr[i].setAttribute("class", "");
                div_arr[i].setAttribute("class", "");
            }
        }
    }
</script>
</body>
</html>

2.第二种实现效果为：

主要实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
     *{padding: 0; margin: 0; box-sizing: border-box}
     div{ width: 70%; margin: 100px auto}
     ul{list-style: none; overflow: hidden}
     .tabs li{
         float: left;
         width: 100px;
         text-align: center;
         line-height: 30px;
         background: #f60;
         border: 1px solid #f60;
         border-bottom: none;
         cursor: pointer;
     }
     .tabs li:hover{
         background: #fff;
     }
     .tabs li.active{
         background: #fff;
     }
     .content{
         position: relative;
         width: 400px;
         height: 300px;
         border: 1px solid #f60;
         border-top: none;
     }
     .content li{
         width: 100%;
         height: 100%;
         position: absolute;
         padding: 10px;
         display: none;
     }
 </style>
</head>
<body>
<div>
<ul class="tabs" id="tabs">
    <li class="active">选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
</ul>
    <ul class="content" id="content">
        <li style="display: block">内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>
</div>

<script>
//    普通方法实现一个选项卡切换
    var tabs =document.getElementById("tabs");
    var tablist = tabs.children;
    var content =document.getElementById("content");
    var conlist = content.children;

    for(i=0;i<tablist.length; i++){
        tablist[i].index = i;  // tablist[i]增加index属性 ，属性值为该项的下标
        tablist[i].onclick = function(){
            for(j=0;j<conlist.length;j++){
                tablist[j].className ="";
                conlist[j].style.display = "none";
            }
            this.className = "active";
            conlist[this.index].style.display = "block";
        }
    }

</script>
</body>
</html>

　3.　第三种实现效果为：

在第二种实现方式的基础上,实现多个选项卡的切换，使用了闭包函数

主要实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            margin: 100px;
        }

        ul {
            list-style: none;
            overflow: hidden;
        }

        .tabs li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid fuchsia;
            background: salmon;
            border-bottom: none;
            cursor: pointer;
        }

        .tabs li.active {
            background: beige
        }

        .content {
            position: relative;
            width: 400px;
            height: 300px;
            border: 1px solid fuchsia;
            border-top: none;
        }

        .content li {
            width: 100%;
            height: 100%;
            position: absolute;
            display: none;
            padding: 170px;
        }
    </style>
</head>
<body>
<div>
    <ul class="tabs" id="tab1">
        <li class="active">选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
    </ul>
    <ul class="content" id="content1">
        <li style="display: block">内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>
</div>
<div>
    <ul class="tabs" id="tab2">
        <li class="active">选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
    </ul>
    <ul class="content" id="content2">
        <li style="display: block">内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>
</div>
<script>
    function tab(tabid, contentid){
        var  tabul = document.getElementById(tabid);
        var tablists = tabul.getElementsByTagName("li");
        var contentul = document.getElementById(contentid);
        var conlists = contentul.getElementsByTagName("li");
        for(i=0;i<tablists.length; i++){
            tablists[i].onclick = function(i){   //闭包函数
                return function (){
                    for(j=0;j<conlists.length;j++){
                        tablists[j].className ="";
                        conlists[j].style.display = "none";
                    }
                    this.className = "active";
                    conlists[i].style.display = "block";
                }
            }(i);
        }
    }
    tab("tab1", "content1");
    tab("tab2", "content2");
</script>
</body>
</html>

转载于:https://www.cnblogs.com/caozong/p/5777893.html

dianxianju8602

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现选项卡切换的三种方式

前两种主要实现一个选项卡的切换，第三种使用闭包看书，构造函数实现多个选项卡的切换：1.第一种实现实现效果为：实现代码为：<!doctype html><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> &l...
复制链接

扫一扫