选项卡效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weirdox/article/details/73302857

选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            #box1{
                width: 600px;
                height: 300px;
                margin: 20px auto;
                border: 1px solid #eaeaea;
            }



            #box1 ul li{
                display: block;
                float: left;
                width: 200px;
                height: 80px;
                text-align: center;
                line-height: 80px;
                background: #EAEAEA;
            }
            #concent{
                text-align: center;
                line-height: 120px;
                font-size: 20px;
                clear: both;
            }
            #concent div{
                display: none;
            }
            #concent div.active{
                display: block;

            }
            #tab li.red{
                background: red;
            }
        </style>
    </head>
    <body>

            <div id="box1">
                <ul id="tab">
                    <li class="red">Tab1</li>
                    <li>Tab2</li>
                    <li>Tab3</li>
                </ul>

            <div id="concent">
                <div class="active">
                    内容一
                </div>
                <div>
                    内容二
                </div>
                <div>
                    内容三
                </div>
            </div>
            </div>
    <script>
        var odiv=document.getElementById("concent").getElementsByTagName("div");
        var oli=document.getElementById("tab").getElementsByTagName("li");
        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='';
                    odiv[i].style.display="none";

                }
                this.className="red"
                odiv[this.index].style.display="block"
            }
        }
    </script>
    </body>
</html>

运行结果如下图：
这里写图片描述
多个选项卡：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多个选项卡</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .tabmenu{
                width: 300px;
                height: 100px;
                margin: 50px auto;
            }
            .tabmenu ul li{
                display: block;
                width: 100px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                float: left;
                background: #eee;
                cursor: pointer;
            }
            .tabside{
                display: none;
                text-align: center;
                line-height: 50px;
            }
            .tabmenu ul li.active{
                background: #ff0000;
                color: #fff;
            }
            .tabmenu div.active{
                display: block;
                border: 1px solid #eaeaea;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                tab("tabmain1","click")
                tab("tabmain2","click")
                tab("tabmain3","click")
                tab("tabmain4","click")

                function tab(id,event){
                    var odiv=document.getElementById(id);
                    var oli=odiv.getElementsByTagName("li");
                    var obox=odiv.getElementsByTagName("div");
                    for(var i=0;i<oli.length;i++){
                        (function(index){
                            oli[i].addEventListener(event,function(){
                                for(var i=0;i<oli.length;i++){
                                    oli[i].className='';
                                    obox[i].style.display='none';
                                }
                                this.className="active"
                                obox[index].style.display='block'
                            })
                        })(i)
                    }

                }
            }
        </script>
        <div id="tabmain1" class="tabmenu">
            <ul>
                <li class="active">Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
            </ul>
            <div class="tabside active">内容一</div>
            <div class="tabside">内容二</div>
            <div class="tabside">内容三</div>
        </div>
        <div id="tabmain2" class="tabmenu">
            <ul>
                <li class="active">Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
            </ul>
            <div class="tabside active">内容一</div>
            <div class="tabside">内容二</div>
            <div class="tabside">内容三</div>
        </div>
        <div id="tabmain3" class="tabmenu">
            <ul>
                <li class="active">Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
            </ul>
            <div class="tabside active">内容一</div>
            <div class="tabside">内容二</div>
            <div class="tabside">内容三</div>
        </div>
        <div id="tabmain4" class="tabmenu">
            <ul>
                <li class="active">Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
            </ul>
            <div class="tabside active">内容一</div>
            <div class="tabside">内容二</div>
            <div class="tabside">内容三</div>
        </div>
    </body>
</html>