jquery 手写实现tabs
前言
现在各种前端框架组件层出不穷,一般情况自然不需要自己去写,本人纯属蛋疼,如有需要,尽管参考。
html部分
classs=“active”,即为选中状态,默认第一个选中
<div class="tabs">
<div class="tabs-ul">
<div class="active">选一</div>
<div>选二</div>
<div>选三</div>
<div>选四</div>
</div>
<div class="tabPane">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
</div>
</div>
js部分
原理:通过click事件统一隐藏,再显示出想显示的tabPane
$(function () {
//初始化,默认第一个选中
showTabPane(0);
$('.tabs-ul').children('div').each(function (i) {
$(this).click(function () {
showTabPane(i);
//去掉所有active状态,再给当前选中的赋予active
$(".tabs-ul div").removeClass("active");
$(this).addClass("active");
});
});
});
function showTabPane(index) {
$('.tabPane').children('div').hide();
$('.tabPane').children('div').eq(index).show();
}
css部分
.tabs-ul {
position: relative;
width: 100%;
height: 46px;
border-bottom: 1px #f7f7f7 solid;
}
.tabs-ul div {
width: 126px;
height: 45px;
line-height: 45px;
text-align: center;
float: left;
background: #ffffff;
color: #737373;
border-left: 1px solid #f7f7f7;
font-size: 16px;
cursor: pointer;
}
.tabs-ul div:hover {
background: #FF8A8A;
color: #ffffff;
}
.tabs-ul .active {
background: #ff7979;
color: #ffffff;
}
.tabs-ul div:last-child {
border-right: 1px solid #f7f7f7;
}
.tabPane {
width: 100%;
text-align: left;
font-size: 14px;
padding-bottom: 30px;
}
本文介绍如何使用jQuery从零开始构建一个简单的Tabs组件。通过HTML、CSS和JS的结合,实现了选项卡切换效果,包括默认选中项、点击切换内容及样式变化。适合初学者了解jQuery操作DOM的基本原理。
8164

被折叠的 条评论
为什么被折叠?



