前言
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是探究tab切换的讲解
环境配置
npm init -y
yarn add vite -D修改page.json配置端口
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite --port 3002"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^4.4.9"
}
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="tab J_tab">
<div class="nav">
<div class="nav-item current">选项1</div>
<div class="nav-item">选项2</div>
<div class="nav-item">选项3</div>
</div>
<div class="page">
<div class="page-item current">页面1</div>
<div class="page-item">页面2</div>
<div class="page-item">页面3</div>
</div>
</div>
<script src="./index.js"></script>
<script type="text/javascript">
var tab=new Tab().init()
</script>
</body>
</html>index.css
.tab{
width: 500px;
height: 500px;
margin:50px auto;
border: 1px solid #000;
}
.tab .nav{
height: 50px;
border-bottom: 1px solid #000;
}
.tab .nav-item{
float: left;
width: 33.33%;
height: 100%;
text-align: center;
line-height: 50px;
}
.tab .nav-item.current{
background-color: #000;
color: #fff;
}
.tab .page{
position: relative;
height: 450px;
}
.tab .page-item{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 450px;
font-size: 100px;
}
.tab .page-item.current{
display: block;
}index.js
; (function (doc) {
var Tab = function () {
var oTab = doc.getElementsByClassName('J_tab')[0];
this.oPage = oTab.getElementsByClassName('page')[0]
this.oNav = oTab.getElementsByClassName('nav')[0]
this.oNavItems = this.oNav.getElementsByClassName('nav-item')
this.oPageItem = this.oPage.getElementsByClassName('page-item')
this.curIdx = 0
}
Tab.prototype.init = function () {
this.bindEvent()
}
Tab.prototype.bindEvent = function () {
this.oNav.addEventListener('click', this.onNavClick.bind(this), false)
}
Tab.prototype.onNavClick = function (ev) {
var e = ev || window.event
var tar = e.target || e.srcElement
var className = tar.className
if (className === 'nav-item') {
this.setCurrent(this.curIdx,'remove')
// this.oNavItems[this.curIdx].className = 'nav-item'
// this.oPageItem[this.curIdx].className = 'page-item'
this.curIdx = [].indexOf.call(this.oNavItems, tar)
// this.oNavItems[this.curIdx].className += ' current'
// this.oPageItem[this.curIdx].className += ' current'
this.setCurrent(this.curIdx,'add')
}
}
Tab.prototype.setCurrent = function (index, field) {
switch (field) {
case 'add':
this.oNavItems[index].className += ' current'
this.oPageItem[index].className += ' current'
break;
case 'remove':
this.oNavItems[index].className = 'nav-item'
this.oPageItem[index].className = 'page-item'
break;
default:
break;
}
}
window.Tab = Tab
})(document)运行结果
优化版本
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="tab J_tab">
<div class="nav">
<div class="nav-item current">选项1</div>
<div class="nav-item">选项2</div>
<div class="nav-item">选项3</div>
</div>
<div class="page">
<div class="page-item current">页面1</div>
<div class="page-item">页面2</div>
<div class="page-item">页面3</div>
</div>
</div>
<script src="./tools.js"></script>
<script src="./index.js"></script>
<script type="text/javascript">
var tab = new Tab({
classObject: {
el:'.J_tab',
navItem: {
origin: 'nav-item',
current: 'nav-item current'
},
pageItem: {
origin: 'page-item',
current: 'page-item current'
}
}
}).init()
</script>
</body>
</html>index.js
; (function (doc,initTools) {
var Tab = function (options) {
var oTab = doc.getElementsByClassName('J_tab')[0];
this.oPage = oTab.getElementsByClassName('page')[0]
this.oNav = oTab.getElementsByClassName('nav')[0]
this.oNavItems = this.oNav.getElementsByClassName('nav-item')
this.oPageItem = this.oPage.getElementsByClassName('page-item')
this.curIdx = 0
this.classObject=options.classObject
}
Tab.prototype.init = function () {
this.bindEvent()
}
Tab.prototype.bindEvent = function () {
this.oNav.addEventListener('click', this.onNavClick.bind(this), false)
}
Tab.prototype.onNavClick = function (ev) {
var tar = initTools.getTarget(ev)
var className = tar.className
if (className === 'nav-item') {
this.setCurrent(this.curIdx,'remove')
// this.oNavItems[this.curIdx].className = 'nav-item'
// this.oPageItem[this.curIdx].className = 'page-item'
this.curIdx = [].indexOf.call(this.oNavItems, tar)
// this.oNavItems[this.curIdx].className += ' current'
// this.oPageItem[this.curIdx].className += ' current'
this.setCurrent(this.curIdx,'add')
}
}
Tab.prototype.setCurrent = function (index, field) {
var navItemClass=this.classObject.navItem
var pageItemClass=this.classObject.pageItem
switch (field) {
case 'add':
this.oNavItems[index].className = navItemClass.current;
this.oPageItem[index].className = pageItemClass.current;
break;
case 'remove':
this.oNavItems[index].className = navItemClass.origin
this.oPageItem[index].className = pageItemClass.origin
break;
default:
break;
}
}
window.Tab = Tab
})(document,initTools)index.css
.tab{
width: 500px;
height: 500px;
margin:50px auto;
border: 1px solid #000;
}
.tab .nav{
height: 50px;
border-bottom: 1px solid #000;
}
.tab .nav-item{
float: left;
width: 33.33%;
height: 100%;
text-align: center;
line-height: 50px;
}
.tab .nav-item.current{
background-color: #000;
color: #fff;
}
.tab .page{
position: relative;
height: 450px;
}
.tab .page-item{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 450px;
font-size: 100px;
}
.tab .page-item.current{
display: block;
}tool.js
var initTools=(function(){
function getTarget(ev){
var e=ev||window.event;
return e.target||e.srcElement
}
return{
getTarget:getTarget
}
})()运行结果
