手写制作一个tab选项卡

最新推荐文章于 2024-04-14 15:25:06 发布

原创最新推荐文章于 2024-04-14 15:25:06 发布 · 983 阅读

CC 4.0 BY-SA版权

这篇博客详细介绍了如何手写制作一个tab选项卡，包括HTML代码和JavaScript交互实现。通过点击不同的tab按钮，利用jQuery的children()和siblings()方法来切换显示的内容。同时，还展示了点击特定按钮打开认证模态框的功能。

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

手写制作一个tab选项卡：

HTML 代码：

我的认证
实名认证
手机认证
学历认证
视频认证

        @*第二页*@
        <div class="container p-0 pb-" style="display:none">
        </div>
    </div>
    @*第三页*@
    <div class="container p-0 pb-4" style="display:none;">

        <div class="container p-0 pb-4" style="display:none;">

        </div>
    </div>

$(’.tabbtn’).children().click(function () {
//当前操作的元素索引值
var id = $(this).index();
$(’.tabbtn’).children().eq(id).addClass(“in”).siblings().removeClass(“in”);
//当前显示，其他的隐藏。
$(’.tabbox’).children().eq(id).show().siblings().hide();
});
//点击进行认证按钮打开认证模态框(学历认证)
$("#jinxrenz").click(function () {
$("#renzmodal").modal(“show”);
});
得到下图所示tab选项卡：

-------------------所用代码注解-------------
children()：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
例如：
HTML 代码:

Hello

Hello Again

And Again

jQuery 代码: $("div").children() 结果: [ Hello Again ] Index():搜索匹配的元素，并返回相应元素的索引值，从0开始计数。如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。例如： HTML 代码:

jQuery 代码: $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 $('li').index($('#bar')); //1，传递一个jQuery对象 $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置 $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。 addClass():为每个匹配的元素添加指定的类名。例如：为匹配的元素加上 'selected' 类 jQuery 代码: $("p").addClass("selected"); $("p").addClass("selected1 selected2") 这个添加了两个类名 removeClass():从所有匹配的元素中删除全部或者指定的类。从匹配的元素中删除 'selected' 类 jQuery 代码: $("p").removeClass("selected");

Siblings(): 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
找到每个div的所有同辈元素。
HTML 代码:

Hello

Hello Again

And Again

jQuery 代码: $("div").siblings() 结果: [

Hello

And Again

]