JQuery 是一個非常常用的 JavaScript 庫，其中的 div 切換操作可以幫助我們簡化網頁的交互設計。下面，我們就來介紹一下如何使用 JQuery 實現 div 切換。
<html><head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><style>.content {
display: none;
text-align: center;
font-size: 24px;
}
</style></head><body><div id="first" class="content">這是第一個 div</div><div id="second" class="content">這是第二個 div</div><div id="third" class="content">這是第三個 div</div><button id="btn1">顯示第一個 div</button><button id="btn2">顯示第二個 div</button><button id="btn3">顯示第三個 div</button><script>$(document).ready(function(){
$("#btn1").click(function(){
$("#first").show();
$("#second").hide();
$("#third").hide();
});
$("#btn2").click(function(){
$("#first").hide();
$("#second").show();
$("#third").hide();
});
$("#btn3").click(function(){
$("#first").hide();
$("#second").hide();
$("#third").show();
});
});
</script></body></html>在上面的代碼中，我們首先定義了三個隱藏的 div 元素和三個按鈕。在樣式中，我們將所有的 div 顯示方式均設置為“不顯示（display:none）”。
接著，我們在 script 標簽中使用 JQuery 實現三個按鈕的點擊事件，分別將所選 div 元素的顯示方式設置為“顯示（display:block）”，并將未選的兩個 div 元素的顯示方式均設置為“不顯示”。這樣一來，當我們點擊不同的按鈕時，就可以實現對應的 div 切換效果啦。
這就是使用 JQuery 實現 div 切換的方法啦，有需要的小伙伴可以嘗試一下哦~