使用单个jQuery脚本独立切换div内容可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<div id="div1">Content 1</div>
<div id="div2">Content 2</div>
<div id="div3">Content 3</div>
$(document).ready(function() {
// 初始显示第一个div
$("#div1").show();
// 监听切换按钮的点击事件
$(".btn").click(function() {
// 获取点击按钮的ID
var btnId = $(this).attr("id");
// 隐藏所有div
$("div[id^='div']").hide();
// 显示对应的div
$("#" + btnId.replace("btn", "div")).show();
});
});
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
通过以上步骤,就可以使用单个jQuery脚本独立切换div内容。点击不同的按钮时,对应的div内容会显示出来,其他div内容会隐藏起来。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云