Jquery 是一個輕量級的 JavaScript 庫,它主要用于簡化 HTML 與 JavaScript 之間的交互。今天我們來看一下如何使用 jQuery 來實現鼠標顯示 div 隱藏 div 的效果。
<script>
$(document).ready(function() {
// 首先把所有隱藏的 div 隱藏起來
$(".hidden").hide();
// 給顯示按鈕加上點擊事件
$("#showButton").click(function() {
// 顯示需要顯示的 div
$("#showDiv").show();
// 隱藏需要隱藏的 div
$("#hiddenDiv").hide();
});
// 給隱藏按鈕加上點擊事件
$("#hideButton").click(function() {
// 顯示需要顯示的 div
$("#hiddenDiv").show();
// 隱藏需要隱藏的 div
$("#showDiv").hide();
});
});
</script>
<div id="showButton">
顯示 div
</div>
<div id="hideButton">
隱藏 div
</div>
<div id="showDiv" class="hidden">
這是需要顯示的 div。
</div>
<div id="hiddenDiv" class="hidden">
這是需要隱藏的 div。
</div>
以上就是使用 jQuery 實現鼠標顯示 div 隱藏 div 的效果的全部代碼。我們首先在文檔準備好后,把所有需要隱藏的 div 都隱藏起來,然后給顯示按鈕和隱藏按鈕加上點擊事件,在點擊事件中控制需要顯示和需要隱藏的 div 的狀態。