web前端选项卡的写法

来源：互联网发布：netbeans php xdebug 编辑：程序博客网时间：2024/06/04 20:14

tab选项卡的一种写法

css:    <style type="text/css">        input{            background: white;        }        .active{            background: yellow;        }        div{            width: 100px;            height:100px;            background: #ccc;            border: 1px solid red;            display: none;        }    </style>javascript:    <script type="text/javascript">        window.onload=function(){            var aBtn=document.getElementsByTagName('input');            var divOne=document.getElementsByTagName("div");            var i=0;            for(i=0;i<aBtn.length;i++){                aBtn[i].index=i;                aBtn[i].onclick=function(){                    for(i=0;i<aBtn.length;i++){                        aBtn[i].className="";                        divOne[i].style.display="none"                    }                    divOne[this.index].style.display="block";                    this.className="active";                 }            }        }    </script>html:<input type="button" class="active" value="1"><input type="button" value="2"><input type="button" value="3"><div style="display: block;" >    aaaaaaaaaaaaa</div><div >   abbbbbbbbbbbbbbbbbb</div><div > ddddddddddddddddd</div>

二种

jquery：

$(document).ready(function(){var liClick=$("#ul1 li");/*alert(liClick.length);*/liClick.click(function(){/*alert($(this).index());*/$(".hides").hide();$("#div_"+$(this).index()).show();});});html：<div class="row">            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">                <ul id="ul1">                    <li class="lix">                        应用                    </li>                    <li>注册</li>                    <li>告警</li>                    <li>未注册</li>                </ul>            </div>            <div  class="col-xs-12 col-sm-12 col-md-12 col-lg-12">                <div id="div_0" class="hides ui-widget-content ui-corner-all" style="display: block;">                    <div class="div1" style="height: 500px;">                        11111111xxxxxxxxxxxxzzzz                    </div>                </div>                <div id="div_1" class="hides ui-widget-content ui-corner-all">                    <div class="div1" style="height: 500px;">                        22222222ddddddddddddd                    </div>                </div>                <div id="div_2" class="hides ui-widget-content ui-corner-all">                    <div class="div1" style="height: 500px;">                        33333333rrrrrrrrrrrrrrrrr                    </div>                </div>                <div id="div_3" class="hides ui-widget-content ui-corner-all">                    <div class="div1" style="height: 500px;">                        444444444tttttttttttttttt                    </div>                </div>            </div>        </div>css：<style type="text/css">        ul,li{            margin: 0px;            padding: 0px;        }        #ul1{            list-style-type: none;            height:20px;        }        #ul1 li{            float: left;            margin-right: 10px;            cursor: pointer;            padding:10px 20px;                    }        .lix{            border:1px solid #030A10;            padding:10px 20px;            border-color: rgba(0,0,0,.4);            background: rgba(0,0,0,.1);        }        .hides{            display: none;        }    </style>

1 0