css中选项卡怎么写 |css实现聚焦失焦样式变化

HTML结构：
<div class="tab">
<ul class="tab-header">
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="tab-content">
<div>选项卡1的内容</div>
<div>选项卡2的内容</div>
<div>选项卡3的内容</div>
</div>
</div>
CSS样式：
.tab {
width: 500px;
height: 300px;
border: 1px solid #333;
overflow: hidden;
}
.tab-header {
height: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.tab-header li {
float: left;
margin-right: 10px;
background-color: #eee;
padding: 5px 10px;
cursor: pointer;
}
.tab-header li.active {
background-color: #fff;
}
.tab-content {
height: 270px;
padding: 10px;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}
JavaScript代码：
var tabHeaders = document.querySelectorAll('.tab-header li');
var tabContents = document.querySelectorAll('.tab-content div');
for (var i = 0; i< tabHeaders.length; i++) {
tabHeaders[i].addEventListener('click', function() {
for (var i = 0; i< tabHeaders.length; i++) {
tabHeaders[i].classList.remove('active');
tabContents[i].classList.remove('active');
}
this.classList.add('active');
tabContents[this.dataset.index].classList.add('active');
});
}

上面的代码实现了一个简单的选项卡功能，其中HTML结构分为选项卡头部和选项卡内容两部分，CSS样式控制了选项卡的外观和布局，JavaScript代码则实现了选项卡的切换效果。

通过以上介绍，相信大家已经了解了如何使用CSS编写选项卡，并且可以自己尝试修改样式和逻辑来实现更加丰富的选项卡功能。