tab切换-选项卡
html
<div class="big">
<ul class="titles">
<li class="active">电影票1</li>
<li>电影票2</li>
<li>电影票3</li>
<li>电影票4</li>
</ul>
<ul class="contents">
<li>动物世界</li>
<li>怦然星动</li>
<li>栀子花开</li>
<li>老炮儿</li>
</ul>
</div>
js
var titles = document.getElementsByClassName('titles')[0].children
var contents=document.getElementsByClassName('contents')[0].children
contents[0].style.display='block'
for (let i = 0; i < titles.length; i++) {
titles[i].onclick = function () {
var active = document.getElementsByClassName('active')[0]
active.classList.remove('active')
this.classList.add('active')
for (let j = 0; j < contents.length; j++) {
contents[j].style.display='none'
}
contents[i].style.display='block'
}
}
css
.big {
width: 400px;
height: 300px;
border: 1px solid blue;
margin: 100px auto;
}
.titles {
height: 50px;
border-bottom: 1px solid gray;
display: flex;
text-align: center;
}
.titles li {
flex: 1;
line-height: 50px;
cursor: pointer;
}
.titles li.active {
background: skyblue;
}
.contents li {
display: none;
}
