html 特效 火车票,原生切换火车票.html

.container{

width: 600px;

border: 1px solid #ccc;

margin: 100px auto;

}

.header{

display: flex;

font-size: 14px;

}

.content{

display: flex;

font-size: 14px;

}

.content .item{

text-align: center;

flex: 1;

}

.header .item{

padding: 8px 0;

flex: 1;

text-align: center;

cursor: pointer;

user-select:none;

flex-direction: column;

align-items: center;

}

.line{

transform: scale(0);

height: 3px;

background: orangered;

position: relative;

top:10px;

transition: 0.3s;

}

.header .item.active {

font-weight: bold;

}

.header .item.active .line{

transform: scale(1);

}

.content .item {

display: none;

}

.container .item.active {

display: block;

}

火车票

汽车票

飞机票

火车票火车票火车票火车票

火车票火车票火车票火车票

火车票火车票火车票火车票

火车票火车票火车票火车票

火车票火车票火车票火车票

汽车票汽车票汽车票汽车票

汽车票汽车票汽车票汽车票

汽车票汽车票汽车票汽车票

汽车票汽车票汽车票汽车票

汽车票汽车票汽车票汽车票

飞机票飞机票飞机票飞机票

飞机票飞机票飞机票飞机票

飞机票飞机票飞机票飞机票

飞机票飞机票飞机票飞机票

飞机票飞机票飞机票飞机票

let header=document.getElementsByClassName('header')[0]

let titles=header.children

let content=document.getElementsByClassName('content')[0]

let contents=content.children

for (let i = 0; i < titles.length; i++) {

titles[i].onclick = () => {

let activeTitle=header.getElementsByClassName('active')[0]

activeTitle.classList.remove('active')

titles[i].classList.add('active')

let activeContent=content.getElementsByClassName('active')[0]

activeContent.classList.remove('active')

contents[i].classList.add('active')

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史