CSS選項卡是網站常見的導航方式,讓用戶輕松訪問不同的內容。但有時我們需要在頁面加載時就讓某個選項卡處于默認選中狀態。下面我們來介紹幾種實現方式。
使用:checked偽類
我們可以使用:checked偽類來設置默認選中的選項卡。首先,HTML代碼需要加入對應的label標簽,并將其與input元素綁定。
<input type="radio" id="tab1" name="tabs" checked> <label for="tab1">選項卡1</label> <input type="radio" id="tab2" name="tabs"> <label for="tab2">選項卡2</label>
接下來,我們使用CSS來定義:checked偽類的樣式。
input[type="radio"]:checked + label { /* 選中后的樣式 */ }
其中,使用“+”選擇器來匹配被選中的input元素緊隨其后的label元素。
使用JavaScript
另一種實現方式是使用JavaScript來設置選項卡的默認選中狀態。我們可以在頁面加載時,手動設置某個選項卡為被選中狀態。例如:
window.onload = function() { // 將選項卡2設為默認選中狀態 document.getElementById("tab2").checked = true; }
注意,這里需要根據HTML代碼中的id屬性來獲取對應的input元素。
以上是兩種實現CSS選項卡默認選中狀態的方法。根據具體需求和瀏覽器兼容性,選擇適合自己的方式即可。