原生JS仿element UI的tabs页

最新推荐文章于 2024-01-26 16:48:25 发布

lanceeeeeeeee

最新推荐文章于 2024-01-26 16:48:25 发布

阅读量715

点赞数 1

分类专栏：前端 js css 文章标签：前端 css js tabs 标签页

本文链接：https://blog.csdn.net/weixin_43735321/article/details/100560576

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html{color:#000;background:#FFF;} 
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
        fieldset,input,textarea,p,blockquote,th,td { 
        margin:0; 
        padding:0; 
        } 
        .Box{
            width: 861px;
            border: 1px solid #e1e1e1;
            margin:100px auto;
            padding:20px 23px 6px 20px;;
            
        }
        .tabs-row{
          overflow: hidden;
          border-bottom: 1px solid #e1e1e1;
        }
        .tabs{
          width: 86px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          float: left;
          margin-right: 26px;
          font-size: 15px;
        }
        .con{
            width: 100%;
            margin-top:10px;
            display:none;
        }
        .current{
            border-bottom: 4px solid #6c8ca5;
            color: #6c8ca5;
        }
        .content-row{
          overflow: hidden;
          height: 50px;
          border-bottom: 1px dashed #e1e1e1;
          padding: 0 17px 0 8px;
        }
        .content-row p{
          line-height: 50px;
          color: #848484;
        }
        .content-row p:first-child{
          margin-right: 16px;
        }
        .content-row p:first-child,
        .content-row p:nth-child(2){
          float: left;
        }
        .content-row p:last-child{
          float: right;
        }
        .paging{
          margin-top: 3px;
          overflow: hidden;
        }
        .paging p{
          float: right;
          line-height: 26px;
        }
        .page{
          width: 26px;
          height: 26px;
          background-color: #407bb3;
          border-radius: 5px;
          text-align: center;
          line-height: 26px;
          color: white;
          margin-left: 20px;
          margin-right: 26px;
        }
    </style>
</head>
<body>
<div class="Box" id="box">
    <div class="tabs-row">
      <p class="tabs current" >热门活动</p>
      <p class="tabs">产品公告</p>
      <p class="tabs">系统公告</p>
    </div>
    <div class="con" style="display:block">
      <div class="content">
        <div class="content-row">
          <p>●</p>
          <p>拉拉拉拉拉拉拉拉拉2sad合计撒谎的萨克换届大会看见爱上</p>
          <p>2019-06-14</p>
        </div>
        <div class="content-row">
          <p>●</p>
          <p>拉拉拉拉拉拉拉拉拉2sad合计撒谎的萨克换届大会看见爱上</p>
          <p>2019-06-14</p>
        </div>
        <div class="paging">
          <p class="page">1</p>
          <p class="count">
            <span>共 </span><span> 6 </span><span> 条</span>
          </p>
          
        </div>
      </div>
    </div>
    <div class="con">内容2</div>
    <div class="con">内容3</div>
    <div class="con">内容4</div>
</div>
<script>
    var box = document.getElementById('box');
    var tabs = document.getElementsByClassName('tabs');
    var divs = box.getElementsByClassName('con')
    for(var i=0;i<tabs.length;i++){
        var btn = tabs[i];
        btn.index = i;
        btn.onclick = function(){

            for(var j=0;j<tabs.length;j++){
                tabs[j].classList.remove('current');
            }
            this.classList.add('current');
            for(var k = 0;k<divs.length;k++){
                divs[k].style.display = 'none';
            }
            divs[this.index].style.display = 'block';
        }
    }
</script>
</body>
</html>

lanceeeeeeeee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS仿element UI的tabs页

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> html{color:#000;background:#FFF;} body,d...
复制链接

扫一扫

专栏目录