今天我們要介紹一種常見的頁面交互效果——點擊切換 CSS 樣式。

我們首先需要制作兩套 CSS 樣式表，需要在 head 標簽下使用 link 標簽分別引入：

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" disabled>

其中 style1.css 和 style2.css 分別定義了我們要切換的兩種樣式。在 style2.css 中使用了 disabled 屬性，這樣頁面加載時將不會載入這個樣式表。

接著需要在頁面中添加一個觸發切換樣式的按鈕，比如：

<button onclick="toggleStyle()">Switch Style</button>

上面的代碼創建了一個按鈕，并且在點擊按鈕時執行了名為 toggleStyle 的 JavaScript 函數。下面是 toggleStyle 函數的代碼：

function toggleStyle() {
var style1 = document.getElementsByTagName('link')[0];
var style2 = document.getElementsByTagName('link')[1];
if (style1.disabled) {
style1.disabled = false;
style2.disabled = true;
} else {
style1.disabled = true;
style2.disabled = false;
}
}

在該函數中，我們首先獲取了前面添加的兩個 link 標簽，然后通過判斷樣式表的 disabled 屬性判斷當前展示的是哪一個樣式。如果 style1 被禁用則啟用它，禁用 style2；反之同理。這樣就能實現點擊切換樣式的效果了。

希望大家能通過這個例子學習到頁面交互的一些基本知識。