基于JQ的简版选项卡记录
2024-09-24 15:23:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简版选项卡</title> <style>
* { margin: 0; padding: 0 }
.tabWrap { width: 300px; height: 400px; margin: 50px auto; box-sizing: border-box; overflow: hidden; }
/*tab按钮*/
.tabNav { width: 300px; height: 50px; background: #e5e5e5; }
.tabNav .tab{ width: 100px; height: 50px; line-height: 50px; float: left; text-align: center; cursor: pointer; }
.active{ background: #00AEFF; }
/*tab内容*/
.tabCont{ width: 300px; height:350px; }
.tabCont .cont{ width: 300px; height: 350px; background: #929292; display: none; text-align: center; }
.tabCont .show{ display: block; }
</style>
</head>
<body>
<div class="tabWrap">
<div class="tabNav">
<div class="tab active">tab1</div>
<div class="tab">tab2</div>
<div class="tab">tab3</div>
</div>
<div class="tabCont">
<div class="cont show">tab1内容</div>
<div class="cont">tab2内容</div>
<div class="cont">tab3内容</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//调用
fn($(".tabNav"),$(".tabCont"),"click");
});
/*
*参数1:按钮层盒子 参数2:内容层盒子 参数3:指定触发事件
*/
function fn(tab,tabCont,event) {
var tabChild = tab.children();
tabCont.children().hide().eq(0).show();
tabChild.each(function (index) {
$(this).on(event,function () {
tabChild.removeClass("active").eq(index).addClass("active");
tabCont.children().hide().eq(index).show();
});
})
}
</script>
</html>
最新文章
- GO语言总结(2)——基本类型
- Spring中配置数据源的4种形式
- NPOIExcelHelper
- 一种利用 Cumulative Penalty 训练 L1 正则 Log-linear 模型的随机梯度下降法
- mysql 命令(一)
- paip.数据挖掘--导出词库 清理太长的iptcode
- Android中的文件权限操作
- C++ 11 笔记 (二) : for循环
- SQL Server与Oracle中的隔离级别
- clearTimeout(timeoutfunc) 是否有必要执行
- 关于this 的一个问题
- jQuery库(noConflict)冲突解决机制
- [Python Web]部署完网站需要做的一些后续工作
- 【算法系列学习】SPFA邻接表最短路 [kuangbin带你飞]专题四 最短路练习 F - Wormholes
- AutoMapper 6.x 扩展
- Java Object中的equals和hashCode
- ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis(空间查询)概览与解释
- 【AtCoder】【思维】【置换】Rabbit Exercise
- parrot os 安装后更改更新源
- 1418 抱歉 ACM 欧拉公式