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 的状态。