這是一篇關于如何通過點擊兩張圖片來切換 css 的文章。

首先，我們需要在 HTML 文件中創建兩張圖片，并為它們分別設置一個 id。如下所示：

<img src="image1.jpg" id="image1">
<img src="image2.jpg" id="image2">

接下來，我們需要編寫兩種不同的 css 樣式，它們用于分別控制兩張圖片的樣式。比如，我們可以為 image1 對應的 css 樣式指定一個邊框，而為 image2 對應的 css 樣式不指定邊框。如下所示：

<style>
#image1 {
border: 1px solid black;
}
#image2 {
/* empty */
}
</style>

然后，我們需要編寫一個 JavaScript 函數，它用于在兩張圖片之間切換。該函數首先獲取兩張圖片的引用，然后判斷當前顯示的圖片是哪一張，進而將其 css 樣式更改為另一張圖片對應的樣式。如下所示：

<script>
function switchImage() {
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
if (image1.style.display === "none") {
image1.style.display = "block";
image2.style.display = "none";
image1.classList.add("bordered");
image2.classList.remove("bordered");
} else {
image1.style.display = "none";
image2.style.display = "block";
image1.classList.remove("bordered");
image2.classList.add("bordered");
}
}
document.getElementById("image1").addEventListener("click", switchImage);
document.getElementById("image2").addEventListener("click", switchImage);
</script>

最后，我們需要定義一個 CSS 類，它用于表示帶邊框的圖片。這樣，我們在 JavaScript 中切換 css 樣式時，就可以根據該類來更改邊框樣式。如下所示：

<style>
.bordered {
border: 1px solid black;
}
</style>

現在，我們已經完成了通過點擊兩張圖片來切換 css 的過程。當我們點擊第一張圖片時，它會出現一個黑色邊框；當我們點擊第二張圖片時，它就會出現一個黑色邊框，而第一張圖片的邊框則會消失。