<!--html-->
<!--tab-->
<div class="top ">
<div class="top_bar flex">
<div class="top_bar_b fot-size30 bg_color566">最新</div>
<div class="top_bar_b fot-size30 bg_color627">关注</div>
<div class="top_bar_b fot-size30 bg_color627">全部</div>
</div>
</div>
<!--body-->
<div class="body ">
<div class="body_b display_b">
<ul class="card_box br">
<li class="card_title mar-bot20 flex br">
<div class="card_t">
<img src="" alt="" class="card_photo">
</div>
<div class="card_t"></div>
</li>
<li class="card_img mar-bot20"><!---->
<img src="" alt="" class="img">
</li>
<li class="card_des">
<p class="fot-size20"></p>
</li>
</ul>
</div>
<div class="body_b display_n">
<p>关注</p>
</div>
<div class="body_b display_n">
<p>全部</p>
</div>
</div>
复制代码
<!--css-->
.top{
width: 100%;
height: 1.7rem;
background-color: #778fe5;
padding: 0.3rem 0.25rem;
}
.top_bar{
height: 0.6rem;
border-radius: 0.2rem;
font-size: 0;
overflow: hidden;
}
.top_bar_b{
width: 33%;
border: 0.01rem solid #778fe5;
color: white;
text-align: center;
line-height: 0.6rem;
/*font-size: 0.30rem;*/
}
.img{
height: 100%;
width: 100%;
}
.flex{
display: flex;
justify-content: space-between;
}
.fot-size30{
font-size: 0.30rem;
}
.fot-size20{
font-size: 0.20rem;
}
.bg_color566{
background-color: #5668a6;
}
.bg_color627{
background-color: #6278cd;
}
.display_b{
display: block;
}
.display_n{
display: none;
}
.br{
border: 0.01rem solid gainsboro;
}
.body{
height: 0;
flex-grow: 1;
z-index: 1;
overflow: scroll;
}
.body_b{
height: 100%;
width: 100%;
padding: 0.25rem 0.25rem;
overflow: auto;
}
.card_box{
height: 4.05rem;
}
.card_title{
height: 0.67rem;
}
.card_t{
width: 50%;
height: 100%;
}
.card_img{
height: 2.56rem;
}
.card_des{
height: 0.5rem;
}
复制代码
<!--js-->
window.onload=function () {
function tab() {
var tab = document.getElementsByClassName('top_bar_b');
var body = document.getElementsByClassName('body_b');
for (let i =0;i<tab.length;i++){
tab[i].onclick = function () {
for (let j=0;j<body.length;j++){
tab[j].classList.remove('bg_color566'); /*把当选色移除*/
tab[j].classList.add('bg_color627'); /*给每个框底色*/
body[j].classList.remove('display_b');
body[j].classList.add('display_n');
}
tab[i].classList.add('bg_color566'); /*给当前选中的tab选中色*/
body[i].classList.remove('display_n');
body[i].classList.add('display_b');
console.log(body[i]);
}
}
}
tab();
}
复制代码
由于整个项目使rem做自适应。需要的朋友可以把rem按100的比例换成px。不过不换也不会影响功能就对了~