JQuery是一種流行的JavaScript庫，可幫助開發人員輕松地操作DOM元素。今天，我們將討論如何使用JQuery手動切換div元素。
首先，我們需要為這個任務創建一個基本的HTML頁面，并在其中添加一些div元素。我們將為這些div元素添加一些類，以便在JQuery中引用它們。以下是我們示例代碼的基本結構：
<!DOCTYPE html>
<html>
<head>
<title>JQuery手動切換div元素</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.active{
display:block;
}
.inactive{
display:none;
}
</style>
</head>
<body>
<div id="div1" class="active">
<p>這是第一個div元素。</p>
</div>
<div id="div2" class="inactive">
<p>這是第二個div元素。</p>
</div>
<div id="div3" class="inactive">
<p>這是第三個div元素。</p>
</div>
</body>
</html>現在，我們需要創建一些JQuery代碼，以便在用戶單擊某個元素時切換div元素。以下是我們將使用的簡單JQuery代碼：
$(document).ready(function(){
$(".nav-item").click(function(){
var current_button = $(this);
var current_id = current_button.data("div-id");
$(".nav-item").removeClass("active");
current_button.addClass("active");
$(".div-item").removeClass("active");
$("#" + current_id).addClass("active");
})
})讓我們來逐步解釋這段JQuery代碼：
首先，我們使用.ready()函數來確保文檔完全加載。接下來，我們為元素綁定了一個.click()事件處理函數，該函數在用戶單擊該元素時被調用。在這個例子中，我們將單擊事件綁定到一個具有.nav-item類的元素，該元素具有一個data-div-id屬性，該屬性設置為與div元素ID相對應的值。
當用戶單擊導航元素時，我們首先獲取當前單擊的元素并將其存儲在current_button變量中。接下來，我們使用data()方法獲取當前div元素的ID，并將其存儲在current_id變量中。
然后，我們使用.removeClass()方法從導航元素和div元素中刪除.active類。接下來，我們將.active類添加到用戶單擊的導航元素和與當前div元素對應的div元素中。這樣，我們可以通過CSS設置.active類來顯示或隱藏div元素。
這就是使用JQuery手動切換div元素的所有步驟。現在，當用戶單擊導航元素時，我們可以動態地切換顯示的div元素。