在網(wǎng)頁(yè)開(kāi)發(fā)中，常常需要使用tab切換來(lái)展示不同內(nèi)容。而如果這些內(nèi)容中有視頻，又該如何實(shí)現(xiàn)呢？CSS提供了一種簡(jiǎn)單的方法，下面就來(lái)介紹一下。

首先，需要在HTML中添加tab切換的結(jié)構(gòu)。這里以?xún)蓚€(gè)tab為例：

<div class="tab-wrap">
<ul class="tab-nav">
<li class="active">Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<video src="video1.mp4" controls></video>
</div>
<div class="tab-pane">
<video src="video2.mp4" controls></video>
</div>
</div>
</div>

接著，需要使用CSS控制tab切換的樣式和行為。這里使用了偽類(lèi)和屬性選擇器：

.tab-wrap {
display: flex;
flex-direction: column;
}
.tab-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.tab-nav li {
cursor: pointer;
margin-right: 1em;
padding: .5em;
border: 1px solid #ccc;
}
.tab-nav li.active {
background-color: #ccc;
}
.tab-content {
flex: 1;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}

最后，需要使用JavaScript來(lái)控制tab的切換。這里使用了事件監(jiān)聽(tīng)器和類(lèi)名的添加和刪除：

var tabs = document.querySelectorAll('.tab-nav li');
var panes = document.querySelectorAll('.tab-pane');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
var tab = this;
var index = Array.prototype.indexOf.call(tabs, tab);
for (var j = 0; j < panes.length; j++) {
panes[j].classList.remove('active');
tabs[j].classList.remove('active');
}
panes[index].classList.add('active');
tabs[index].classList.add('active');
});
}

通過(guò)以上的步驟，就可以實(shí)現(xiàn)一個(gè)支持視頻的tab切換了。