jquery封装简单的tab切换

最新推荐文章于 2025-06-19 12:40:23 发布

LilyBrownii

最新推荐文章于 2025-06-19 12:40:23 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：代码片段文章标签： jquery tab切换

本文链接：https://blog.youkuaiyun.com/paddy52/article/details/53584350

代码片段专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单选项卡插件，通过HTML、CSS和JavaScript结合完成页面元素的动态显示与隐藏，实现了平滑的切换效果。文章详细展示了如何设置样式和编写jQuery代码来控制不同面板的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
body{ margin:0; padding:0;}
ul,li{ margin:0; padding:0; list-style:none;}
.box{ width:400px; margin:0 auto;}
.box ul{ height:40px;}
.box ul li{ float:left; width:100px; color:#666; text-align:center; line-height:40px;}
.box ul li.now{ color:#F60; border-bottom:solid 2px #FF6600;}

.list{ margin-top:20px}
.list div{ color:#666;width: 200px;text-align: center;}
.list div.text{ display:none;}
</style>
</head>

<body>
<div class="box" id="box">
<ul id="tab">
<li>jauery</li>
<li>html</li>
<li>css</li>
<li>ajax</li>
</ul>
<div class="list" id="list">
<div class="text" style="display:block;">jauery</div>
<div class="text">html</div>
<div class="text">css</div>
<div class="text">ajax</div>
</div>
</div>
<script type="text/javascript">
function change(tab,content){
var $tab = $(tab);
$tab.find("li").eq(0).addClass("now");
$tab.find("li").on("click",function(){
var index = $(this).index();
$(this).addClass("now").siblings().removeClass("now");
$(content).children("div").eq(index).show().siblings().hide();
})
}
change("#tab","#list");
</script>

</body>
</html>