zoukankan      html  css  js  c++  java
  • tab页面切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .hide{display:none;}
    li{list-style: none;display:inline-block;background-color:#eee;}
    .active{background-color:red;color:#fff;}
    .aTapwraps{border:1px solid red;}
    .aTapwraps div{border:1px solid pink;}
    </style>
    </head>
    <body>
    <div class="tapWrap">
    <ul class="headWrap" id="tapWrap">
    <li class="active">要闻</li>
    <li>公安部要闻</li>
    </ul>
    <div class="aTapwraps" id="tapWraps">
    <div>
    <p>文字1</p>
    <p>文字1</p>
    <p>文字1</p>
    </div>
    <div class='hide'>
    <p>文字2</p>
    <p>文字2</p>
    <p>文字2</p>
    </div>
    </div>
    <ul class="headWrap" id="tapWrap1">
    <li class="active">要闻</li>
    <li>公安部要闻</li>
    </ul>
    <div class="aTapwraps" id="tapWraps1">
    <div>
    <p>文字1</p>
    <p>文字1</p>
    <p>文字1</p>
    </div>
    <div class='hide'>
    <p>文字2</p>
    <p>文字2</p>
    <p>文字2</p>
    </div>
    </div>
    </div>
    <script>
    window.onload = function(){

    function stopPropagation(e){
    var e = e || window.event;
    if(e.stopPropagation){
    e.stopPropagation();
    }else{
    e.cancelBubble = true;
    }
    }
    function For(headWrapLi,tapWrapLi){
    for(var i = 0;i<headWrapLi.length;i++){
    headWrapLi[i].index = i;
    headWrapLi[i].onclick = function(e){
    stopPropagation(e);
    for(var j = 0;j<tapWrapLi.length;j++){
    headWrapLi[j].className = '';
    tapWrapLi[j].className = 'hide';
    }
    this.className = 'active';
    tapWrapLi[this.index].className = '';
    }
    }
    }

    function tab(head,content){
    var headLi = document.getElementById(head).getElementsByTagName('li');
    var contentDiv = document.getElementById(content).getElementsByTagName('div');
    For(headLi,contentDiv)
    };
    tab('tapWrap','tapWraps')
    tab('tapWrap1','tapWraps1')
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    iOS编程中比较两个日期的大小
    sqlite第三方类库:FMDB使用
    ios日期格式转换
    UISwipeGestureRecognizer 左右事件捕捉
    iOS7.0中UILabel高度调整注意事项
    【java基础】Java反射机制
    【struts2】ActionContext与ServletActionContext
    【struts2】OGNL
    【struts2】值栈(后篇)
    【struts2】值栈(前篇)
  • 原文地址:https://www.cnblogs.com/studyh5/p/10598927.html
Copyright © 2011-2022 走看看