//tab.js
;(function(global) { "use strict"; var M = function(el,options) { this.el = typeof el === "string" ? document.querySelector(el) : el; this.options = JSON.stringify(options) !='{}'?options:false; this.options && this.tabTitle(); }; M.prototype = { // 创建tab,并且绑定事件回调 tabTitle:function(){ let _this = this; for(var i = 0; i<=this.options.Title.length-1;i++){ let li = document.createElement("li"); li.start = i; var textnode = document.createTextNode(`${this.options.Title[i]}`); li.onclick = function(){ for(var k =0;k<=_this.el.getElementsByTagName("li").length-1;k++){ _this.el.getElementsByTagName("li")[k].className = ''; }; this.className = 'active'; _this.options.content&&_this.contentEvetn(this.start); _this.options.titleEvent&&_this.options.titleEvent(this.start); }; li.appendChild(textnode); this.el.appendChild(li); }; (this.options.defaultIndex && this.defaultIndexEvetn(this.options.defaultIndex-1))||(!this.options.defaultIndex && this.defaultIndexEvetn(0)) }, // 默认展示第几项 defaultIndexEvetn:function(activeDom){ this.el.getElementsByTagName("li")[activeDom].className = 'active'; if(this.options.content){//是否有内容容器切换，有就设置默认选项 let content = document.getElementById(this.options.content); content.getElementsByTagName('div')[activeDom].style.display = 'block'; // 记录上次展示的容器下标 this.options.index = activeDom }; }, // 切换内容 contentEvetn:function(index){ if(index == this.options.index){return;}; let content = document.getElementById(this.options.content); let content1 = content.getElementsByTagName('div'); content1[this.options.index].style.display = 'none'; content1[index].style.display = 'block'; this.options.index = index; } }; if (typeof module !== 'undefined' && module.exports) module.exports = M; if (typeof define === 'function') define(function() { return M; }); global.tab = M; })(this);
页面使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
ul,li{
list-style:none;
flex: 1;
text-align: center;
cursor: pointer;
}
ul{
display: flex;
margin: 0;
padding: 0;
}
#div{
width: 100%;
}
.active{
color: red;
}
#content>div{
display: none;
}
</style>
<body>
<div style="width: 300px;height: 100px;margin-top: 30px;">
<div id="div" >
<ul id="tabClick" style="border: 1px solid #000;"></ul>
<div id="content">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<script src="./tab.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var mObj = new tab("#tabClick",{
Title:['首页','新闻','时尚'],//选卡标题
content:'content',//切换内容节点id
defaultIndex:2,//默认选中第几项
titleEvent:function(res){//选项卡事件回调
console.log('选择了第'+res)
}
});
</script>
</body>
</html>
//更多功能关注下一篇2.0
欢迎转发
我是马丁的车夫，欢迎转发收藏！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通