选项卡及多个选项卡应用

来源：互联网发布：企业网络建设需求分析编辑：程序博客网时间：2024/06/07 03:13

选项卡

<!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>

运行结果如下图：
这里写图片描述

阅读全文

0 0