jquery 实现简单的标签页效果

2026/9/30 8:14:29 拓冰建站浏览量

实现

<!DOCTYPE html>
<html>
<head><title>jq 实现简单的标签页效果</title><script src="/jquery/jquery-1.11.1.min.js"></script><style>.tab {cursor: pointer;width:100px;height:30px;float:left;text-align:center;background-color:red;color:white;margin:1px;cur}#dv {border:1px solid pink; width:404px;height:100px;  background-color:aliceblue          }</style><script>$(function () {$('div.tab').click(function () {$('#dv').text(this.innerText);});});</script>
</head><body><div class="tab">标签1</div><div class="tab">标签2</div><div class="tab">标签3</div><div class="tab">标签4</div><div id="dv">content</div>
</body>
</html>

效果

在这里插入图片描述

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者
请添加图片描述

建站实战干货

jquery 实现简单的标签页效果

实现

效果