zoukankan      html  css  js  c++  java
  • 原生js---tab标签页

    <!DOCTYPE html>
    <html>
    <head>
    <title>tab标签页</title>
    <meta charset="utf-8">
    <style type="text/css">
    ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    ul li{
    float: left;
    margin-right: 10px;
    }
    #tab_con{
    clear: left;
    margin-top: 15px;
    }
    .active{
    background: #333;
    color: #fff;
    }
    .one{
    100%;
    height: 200px;
    background: #f00;
    }
    .two{
    100%;
    height: 200px;
    background: #0f0;
    display: none;
    }
    .three{
    100%;
    height: 200px;
    background: #00f;
    display: none;
    }
    </style>
    </head>
    <body>
    <ul id="tab_nav">
    <li class="active">tab1</li>
    <li>tab2</li>
    <li>tab2</li>
    </ul>
    <div id="tab_con">
    <div class="one">内容1</div>
    <div class="two">内容2</div>
    <div class="three">内容3</div>
    </div>
    </body>
    <script type="text/javascript">
    //利用索引值进行传值
    var tab=document.getElementById('tab_nav').children;
    var con=document.getElementById('tab_con').children;
    for(var i=0;i<tab.length;i++){
    tab[i].index=i;
    tab[i].onclick=function(){
    for(j=0;j<con.length;j++){
    con[j].style.display="none";
    tab[j].className="";
    }
    con[this.index].style.display="block";
    this.className="active";
    }
    }
    </script>
    </html>
  • 相关阅读:
    sql总结
    2018年6月10日笔记
    Docker入门之zabbix-agent篇
    2018年6月7日笔记
    2018年6月5日笔记
    Docker入门之container篇
    Docker入门之image篇
    Docker 入门
    2018年5月31日笔记
    2018年5月29日笔记
  • 原文地址:https://www.cnblogs.com/bingjiebeibei/p/9355272.html
Copyright © 2011-2022 走看看