选项卡

2017-12-06 15:07:00
admin
原创
399
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
  var tab_t = document.getElementById("tab_t");
    var tab_t_li = tab_t.getElementsByTagName("li");
  var tab_c = document.getElementById("tab_c");
    var tab_c_li = tab_c.getElementsByTagName("div");
    var len = tab_t_li.length;
    var i=0;
    
    for(i=0; i<len; i++){
      tab_t_li[i].index = i;
      tab_t_li[i].onclick = function(){
          for(i=0; i<len; i++){
              tab_t_li[i].className = '';
                tab_c_li[i].className = 'hide';
            }
            tab_t_li[this.index].className = 'act';
            tab_c_li[this.index].className = '';
        }
    }
    
}
</script>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">选择1</li>
    <li>选择2</li>
    <li>选择3</li>
    <li>选择4</li>
  </ul>
  <div id="tab_c">
    <div>内容1</div>
    <div class="hide">内容2</div>
    <div class="hide">内容3</div>
    <div class="hide">内容4</div>
  </div>
</div>  
  
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227