100字范文 > 【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果

【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果

时间：2023-05-23 18:47:42

1、实现效果：

案例描述：当用户单击不同的导航时，与其对应的内容回相应的呈现。

案例要求：使用jquery制作实现tab选项卡单击切换效果。

2、实现思路：

（1）div+css布局，制作选项卡和对应内容卡区域。

（2）给选项卡添加点击事件

（3）一次只能选中一个选项卡（元素），当单击该元素时，给其增加选中的特殊样式，同时控制其他兄弟元素，移除特殊样式。

（4）选项卡和内容卡里的个元素，一一对应，因此可以共用索引。

3、需要掌握的知识点：

（1）基本html知识、基础div+css布局

（2）正确引用jquery文件

（3）jquery选择器的使用：后代选择器

（4）jquery常用事件方法的使用：ready、click、addClass、removeClass、eq、index、siblings

（5）jquery定义函数的方法

4、实现步骤：

第一步：制作网页内容（选项卡和其对应的内容卡）

<body><div class="container"><div class="option-list"><ul><li>未付款订单</li><li>未发货订单</li><li>未收货订单</li><li>已完成订单</li><li>失效的订单</li></ul></div><div class="card-list"><ul><li>这是还没有付款的订单11</li><li>这是还没有发货的订单22</li><li>这是还没有收货的订单33</li><li>这是已完成的订单44</li><li>这是已经失效的订单55</li></ul></div></div></body>

第二步：添加css样式

第三步：引入jQuery文件

<script src="js/jquery-3.4.1.min.js"></script>

第四步：写jquery代码

代码分析：

siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。index() 方法返回指定元素相对于其他指定元素的 index 位置。这些元素可通过 jQuery 选择器或 DOM 元素来指定。导航区的li元素和内容区的li元素，要一一对应，因此每一组的index应该是一样的。

思考：利用本案例，制作复杂Tab选项案例。

本案例完整代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>王迪-选项卡案例</title><style>body { font: 16px "微软雅黑",sans-serif;}/*设置body统一的文字样式*/ul { list-style: none; margin: 0px; padding: 0px;}/*设置整个页面上的ul属性,取消默认的项目符号及外边距和内填充*/.container { margin: 20px auto; width: 800px; }/*设置选项卡所在div的样式,左右居中*/.option-list { height: 40px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;}.option-list li { float: left; height: 39px; padding: 0px 20px; border-right: 1px solid #ccc; border-top: 1px solid #ccc; line-height: 40px; border-bottom: none; background-color: #f5f5f5; cursor:pointer;} .card-list li { padding: 20px; border: 1px solid #ccc; border-top: none; height: 300px; display: none;}.card-list .current { display: block;}/*设置第一个内容区,默认显示，*/.option-list .current { background-color: white; height: 40px;}/*设置第一个选项卡背景色,以区分其他选项卡,同时修改高度为40px*/</style><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){//使用后代选择器.option-list li，选中导航元素，并给他们添加click方法$(".option-list li").click(function(){//使用this关键字选中当前单击的对象，增加样式current，并使用siblings方法找到该对象的所有同级元素，移除样式current$(this).addClass("current").siblings("li").removeClass("current");//使用后代选择器.card-list li，选中内容区元素，全部移除样式curr，再使用eq方法找到导航区li对象的索引数字，同时作为内容区的索引，增加样式current$(".card-list li").removeClass("current").eq($(this).index()).addClass("current");})})</script></head><body><div class="container"><div class="option-list"><ul><li class="current">未付款订单</li><li>未发货订单</li><li>未收货订单</li><li>已完成订单</li><li>失效的订单</li></ul></div><div class="card-list"><ul><li class="current">这是还没有付款的订单11</li><li>这是还没有发货的订单22</li><li>这是还没有收货的订单33</li><li>这是已完成的订单44</li><li>这是已经失效的订单55</li></ul></div></div></body></html>

==========这里是结束分割线=============

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。