```html

```

在上述代碼中，我們創(chuàng)建了一個包含三個按鈕和三個內容區(qū)域的容器。每個按鈕都有一個唯一的 `id`，用于標識對應的標簽頁。每個內容區(qū)域也有一個唯一的 `id`，用于顯示相應的內容。

二、樣式設置

接下來，我們需要為標簽頁和內容區(qū)域設置樣式，以實現標簽頁的切換效果?？梢允褂?CSS 來定義按鈕的樣式，例如：

```css

#tab-container {

border: 1px solid #ccc;

padding: 10px;

}

#tab-container button {

background-color: #f2f2f2;

border: none;

padding: 10px 20px;

cursor: pointer;

}

#tab-container button:hover {

background-color: #ddd;

}

```

上述代碼設置了標簽頁容器的邊框和內邊距，以及按鈕的背景顏色、邊框和鼠標懸停效果。

對于內容區(qū)域的樣式，可以根據需要進行設置。例如，我們可以隱藏除了當前顯示的內容區(qū)域之外的其他內容區(qū)域：

```css

#content1, #content2, #content3 {

display: none;

}

```

三、腳本實現

我們需要使用 JavaScript 來實現標簽頁的切換功能?？梢詾槊總€按鈕添加一個點擊事件監(jiān)聽器，當按鈕被點擊時，顯示對應的內容區(qū)域，并隱藏其他內容區(qū)域。以下是一個簡單的 JavaScript 代碼示例：

```html

```

在上述代碼中，我們使用 `querySelectorAll` 方法獲取所有的按鈕和內容區(qū)域元素。然后，為每個按鈕添加一個點擊事件監(jiān)聽器，當按鈕被點擊時，遍歷所有的內容區(qū)域，將它們的 `display` 屬性設置為 `none`，以隱藏它們。接著，獲取當前點擊的按鈕的索引，并根據索引顯示對應的內容區(qū)域，將其 `display` 屬性設置為 `block`。

通過以上步驟，我們就可以在 HTML 中創(chuàng)建一個簡單的標簽頁效果。用戶可以點擊不同的標簽按鈕，切換顯示不同的內容區(qū)域。當然，這只是一個基本的示例，你可以根據實際需求進行擴展和定制，例如添加動畫效果、動態(tài)加載內容等。

希望這篇文章對你有所幫助！如果你有任何其他問題，請隨時提問。