卡片风格的Tab

最新推荐文章于 2024-02-29 11:08:15 发布

sjy7329

最新推荐文章于 2024-02-29 11:08:15 发布

阅读量229

点赞数

分类专栏： tab 文章标签： tab-卡片

本文链接：https://blog.csdn.net/sunjynyue/article/details/78131428

版权

tab 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1{
      width:100%;
      height:auto;
      box-shadow:0 2px 5px 0 rgba(0,0,0,.1);
    }
    #title{
      font-size:0;
      border-top:1px #e2e2e2 solid;
      border-right:1px #e2e2e2 solid;
      border-bottom:1px #e2e2e2 solid;
      background:#f2f2f2;
    }
    #title div{
      width:95px;
      line-height:40px;
      text-align:center;
      display: inline-block;
      background:#f2f2f2;
      margin:0 auto;
      padding:0;
      font-size:14px;
    }
    #title .active{
      background:#fff;
      border-left:1px #e2e2e2 solid;
      border-right:1px #e2e2e2 solid;
    }
    #cont{
      width:calc(100% - 2px);
      border-left:1px #e2e2e2 solid;
      border-right:1px #e2e2e2 solid;
      border-bottom:1px #e2e2e2 solid;
    }
    #cont div{
      padding:25px;
      height:500px;
      display: none;
    }
  </style>
</head>
<script>
  window.onload=function(){
    var Tit=document.getElementById('title');
    var oDiv1=Tit.getElementsByTagName('div');
    var Cont=document.getElementById('cont');
    var oDiv2=Cont.getElementsByTagName('div');

      for(var i=0;i<oDiv1.length;i++){
        oDiv1[i].index=i;
        oDiv1[i].onclick=function(){
          for(var i=0;i<oDiv1.length;i++){
            oDiv1[i].className='';
            oDiv2[i].style.display='none';
          };
          this.className='active';
          oDiv2[this.index].style.display='block';
        }
      }

  }
</script>
<body>
<div id="div1">
  <div id="title">
    <div class="active">教育</div>
    <div>培训</div>
    <div>招聘</div>
    <div>出国</div>
  </div>
  <div id="cont">
    <div style="display: block">1111111</div>
    <div>2222222</div>
    <div>3333333</div>
    <div>4444444</div>
  </div>
</div>
</body>
</html>

sjy7329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卡片风格的Tab

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100%; height:auto; border:1px #e2e2e2 solid; box-shadow:0 2px
复制链接

扫一扫