<!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>
原生JS仿element UI的tabs页
最新推荐文章于 2024-01-26 16:48:25 发布