CSS可以非常方便地實(shí)現(xiàn)左邊選項(xiàng)卡切換，代碼如下：

<ul class="tabs">
<li class="tab active">選項(xiàng)卡1</li>
<li class="tab">選項(xiàng)卡2</li>
<li class="tab">選項(xiàng)卡3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">選項(xiàng)卡1的內(nèi)容</div>
<div class="tab-pane">選項(xiàng)卡2的內(nèi)容</div>
<div class="tab-pane">選項(xiàng)卡3的內(nèi)容</div>
</div>

其中，tabs類啟用了Flex布局，并設(shè)置了水平排列和頂部對(duì)齊，使選項(xiàng)卡的布局更加整齊。active類用于標(biāo)識(shí)當(dāng)前選中的選項(xiàng)卡，tab-pane類用于標(biāo)識(shí)對(duì)應(yīng)的內(nèi)容。
CSS代碼如下：

.tabs {
list-style: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.tab {
padding: 10px;
margin-bottom: 10px;
cursor: pointer;
border-radius: 5px;
}
.active {
background-color: #f5f5f5;
border-left: solid 3px #0077cc;
}
.tab-content {
margin-left: 10px;
}
.tab-pane {
display: none;
}
.active.tab-pane {
display: block;
}

其中，active類設(shè)置了選中選項(xiàng)卡時(shí)的背景色和左邊框，tab-pane類默認(rèn)隱藏內(nèi)容，active.tab-pane類顯示選中選項(xiàng)卡對(duì)應(yīng)的內(nèi)容。
在JavaScript中，我們可以在選項(xiàng)卡上添加一個(gè)點(diǎn)擊事件，改變active類的狀態(tài)，并顯示對(duì)應(yīng)的內(nèi)容。代碼如下：

var tabs = document.querySelectorAll('.tab');
var tabContent = document.querySelectorAll('.tab-pane');
tabs.forEach(function(tab, index) {
tab.addEventListener('click', function() {
tabs.forEach(function(tab) {
tab.classList.remove('active');
});
this.classList.add('active');
tabContent.forEach(function(content) {
content.classList.remove('active');
});
tabContent[index].classList.add('active');
});
});

以上代碼實(shí)現(xiàn)了選項(xiàng)卡的切換，點(diǎn)擊不同的選項(xiàng)卡時(shí)，它們的狀態(tài)會(huì)改變，對(duì)應(yīng)的內(nèi)容也會(huì)顯示出來(lái)。