<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 600px;
height: 400px;
margin: 100px auto;
background: wheat;
}
.box li{
float: left;
line-height: 30px;
padding: 0 20px;
cursor: pointer;
margin-left: 50px;
background: pink;
list-style: none;
border-bottom: 1px solid pink;
}
.box .cur{
background: yellow;
color: white;
}
.box ul{
height: 50px;
}
.box .d{
position: absolute;
left: 0;
top: 40px;
width: 600px;
height: 400px;
}
</style>
<body>
<div class="box" id="b">
<ul>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="d" style="background: pink;"></div>
<div class="d" style="background: yellow;"></div>
<div class="d" style="background: blue;"></div>
<div class="d" style="background: red;"></div>
<div class="d" style="background: hotpink;"></div>
</div>
<script>
// 下方展示下标为1的，其他的.d兄弟元素隐藏
$('#b .d').eq(0).show().siblings('.d').hide();
//点击标题，当前标题添加样式，其它兄弟元素取消样式
$('#b li').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
var i = $(this).index(); //点击当前元素的下标值
$('#b .d').eq(i).show().siblings('.d').hide();
});
</script>
</body>
最终实现的效果如下：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具