<div 切換 js</div>
<div 切換是一種常見的前端技術，用于在網頁中切換不同的內容，使得頁面具有更好的交互性和用戶體驗。通過使用JavaScript編寫適當的代碼，我們可以實現在用戶與頁面進行交互時，根據用戶的操作來顯示或隱藏不同的內容。
下面通過幾個代碼案例來詳細解釋和說明如何使用JavaScript實現div切換效果。在這些案例中，我們將使用兩個div，一個按鈕，以及一些適當的JavaScript代碼來實現切換效果。
案例一：點擊按鈕切換div的可見性
在這個案例中，我們將創建兩個div，一個稱為"div1"，另一個稱為"div2"。開始時，只有"div1"是可見的，而"div2"是隱藏的。當用戶點擊一個按鈕時，"div1"將隱藏，"div2"將顯示。

html
<p>點擊按鈕切換div的可見性：</p>
<br>
<div id="div1">這是div1的內容</div>
<div id="div2" style="display: none;">這是div2的內容</div>
<br>
<button onclick="toggleDivs()">切換</button>
<br>
<script>
function toggleDivs() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
<br>
   if (div1.style.display === "none") {
div1.style.display = "block";
div2.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
}
}
</script>

在這個案例中，我們聲明了兩個變量div1和div2，分別指向id為"div1"和"div2"的div元素。初始時，我們通過設置div2的display樣式為"none"來隱藏它。
然后，我們定義了toggleDivs()函數，該函數根據當前div1的可見性切換這兩個div的可見性。當div1的display樣式為"none"時，表示它是隱藏的，則將其顯示，同時將div2隱藏。反之，如果div1是可見的，則將其隱藏，顯示div2。
最后，我們在一個按鈕上添加了onclick事件，當用戶點擊按鈕時，toggleDivs()函數將會被調用，實現兩個div的切換效果。
案例二：通過添加或刪除class來切換div的可見性
在這個案例中，我們將使用JavaScript的DOM操作方法classList，以及CSS樣式來實現div的切換效果。我們將創建兩個div，一個稱為"div1"，另一個稱為"div2"。開始時，只有"div1"是可見的，而"div2"是隱藏的。當用戶點擊一個按鈕時，通過添加或刪除一個特定的class，從而切換div的可見性。

html
<p>通過添加或刪除class切換div的可見性：</p>
<br>
<div id="div1">這是div1的內容</div>
<div id="div2" class="hidden">這是div2的內容</div>
<br>
<button onclick="toggleDivs()">切換</button>
<br>
<script>
function toggleDivs() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
<br>
   if (div1.classList.contains("hidden")) {
div1.classList.remove("hidden");
div2.classList.add("hidden");
} else {
div1.classList.add("hidden");
div2.classList.remove("hidden");
}
}
</script>
<br>
<style>
.hidden {
display: none;
}
</style>

在這個案例中，我們聲明了兩個變量div1和div2，分別指向id為"div1"和"div2"的div元素。初始時，我們通過為div2添加一個class（hidden）來隱藏它。
然后，我們定義了toggleDivs()函數，該函數通過檢查div1是否包含class（hidden）來切換這兩個div的可見性。當div1包含該class時，我們通過classList的remove()方法來刪除div1的hiddenclass，并通過classList的add()方法來向div2添加該class。這一操作將使得div1可見，div2隱藏。反之，如果div1不包含該class，則將hiddenclass分別添加到div1和div2，使得div2可見，div1隱藏。
最后，在<style>標簽中，我們定義了.hidden類的樣式，設置display為"none"，從而實現div的隱藏效果。
通過以上兩個案例的介紹，我們可以看到如何使用JavaScript編寫代碼來實現div的切換效果。我們可以根據具體的需求和網頁的結構，選擇適合的方法來實現div的切換。這些技術不僅可以應用于div，還可以用于其他HTML元素的切換。通過合理地運用這些技術，我們可以為用戶呈現出更豐富、更交互性的網頁內容，提升用戶體驗。