web前端选项卡的写法

最新推荐文章于 2024-01-24 12:19:34 发布

青天魔王

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量2.6k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/leixu1027/article/details/52190250

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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.οnlοad=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].οnclick=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>