純css滑動選項卡是一種在網頁設計中非常常見的交互方式。它可以讓網頁的布局更加美觀，并且能夠讓用戶快速地瀏覽網頁中的不同內容。下面介紹一種使用純css實現滑動選項卡的方法：

<div class="tab">
<ul class="tabs">
<li>選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
<li>選項卡4</li>
</ul>
<div class="tab-content">
<div class="tab-pane">
這是選項卡1的內容
</div>
<div class="tab-pane">
這是選項卡2的內容
</div>
<div class="tab-pane">
這是選項卡3的內容
</div>
<div class="tab-pane">
這是選項卡4的內容
</div>
</div>
</div>

上面的代碼中，<div class="tab">是用于包裹整個滑動選項卡。<ul class="tabs">是選項卡的標題，每個標題使用<li>標簽包裹。<div class="tab-content">是選項卡的內容區，每個內容區使用<div class="tab-pane">標簽包裹。

下面是css代碼：

.tab {
position: relative;
}
.tabs {
display: flex;
justify-content: center;
border-bottom: 1px solid #ccc;
}
.tabs li {
list-style: none;
padding: 10px;
cursor: pointer;
}
.tabs li.active {
color: #09f;
border-bottom: 2px solid #09f;
}
.tab-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
}
.tab-pane {
display: none;
padding: 10px;
}
.tab-pane.active {
display: block;
}

css代碼中，首先定義了.tab的position為relative，是為了讓.tab-content的position為absolute時，相對于.tab定位。.tabs使用了flex布局，并且為了美觀，添加了下邊框1像素粗的灰色邊框。在每個選項卡被激活時，我們可以使用.active類來添加樣式，比如修改border的樣式。.tab-pane的display屬性默認為none，當.active類被添加時，display屬性變為block，內容就會被顯示出來。

上面的代碼是一個簡單的示例，只包含了四個選項卡。實際上，我們可以根據自己的需求和實際情況來添加選項卡的數量，并且可以通過樣式來自定義選項卡的樣式和布局。