1. css使用display控制每项的展示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用不同CSS切换效果的tab栏</title>
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrap">
<div class="tab J_tab">
<div class="item current" data-index="0">选项1</div>
<div class="item" data-index="1">选项2</div>
<div class="item" data-index="2">选项3</div>
</div>
<div class="page J_page">
<div class="page-wrap display-wrap">
<div class="item active" data-index="0">页面1</div>
<div class="item" data-index="1">页面2</div>
<div class="item" data-index="2">页面3</div>
</div>
</div>
</div>
<script src="./tools.js"></script>
<script src="./index.js"></script>
</body>
</html>
style.css
.wrap{
width: 500px;
height: 500px;
margin: 50px auto;
}
.tab{
height: 50px;
}
.tab .item{
float: left;
width: 100px;
height: 100%;
text-align: center;
line-height: 50px;
}
.tab .item.current{
background-color: #000;
color: #fff;
}
.page{
position: relative;
height: 450px;
border: 1px solid #000;
overflow: hidden;
}
.page .page-wrap{
height: 100%;
}
.page .page-wrap .item{
height: 100%;
font-size: 100px;
text-align: center;
line-height: 450px;
}
.page .page-wrap.display-wrap .item{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.page .page-wrap.display-wrap .item.active{
display: block;
}
tools.js：封装了一个工具函数，还可以添加其它的工具函数进去
var initTools = (function(){
function getTarget(e){
var event = e || window.event,
target = event.target || event.srcElement
return target
}
return {
getTarget: getTarget
}
})()
index.js：主要的js代码
;(function (doc, initTools) {
var oTab = doc.getElementsByClassName('J_tab')[0],
oPage = doc.getElementsByClassName('J_page')[0],
oTabItems = oTab.getElementsByClassName('item'),
oPageItems = oPage.getElementsByClassName('item'),
curIdx = 0
var init = function(){
bindEvent()
}
function bindEvent(){
oTab.addEventListener('click', onTabClick, false)
}
function onTabClick(e){
var target = initTools.getTarget(e)
if(target.className == 'item'){
curIdx = target.getAttribute('data-index')
render(target, curIdx)
}
}
function render(target, curIdx){
for(var i=0; i<oTabItems.length; i++){
oTabItems[i].className = 'item'
oPageItems[i].className = 'item'
}
target.classList.add('current')
oPageItems[curIdx].classList.add('active')
}
init()
})(document, initTools)
2. css使用position控制每项的展示
index.html：跟上面差不多，就是一个class属性变了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用不同CSS切换效果的tab栏</title>
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrap">
<div class="tab J_tab">
<div class="item current" data-index="0">选项1</div>
<div class="item" data-index="1">选项2</div>
<div class="item" data-index="2">选项3</div>
</div>
<div class="page J_page">
<div class="page-wrap position-wrap">
<div class="item" data-index="0">页面1</div>
<div class="item" data-index="1">页面2</div>
<div class="item" data-index="2">页面3</div>
</div>
</div>
</div>
<script src="./tools.js"></script>
<script src="./index.js"></script>
</body>
</html>
style.css代码：跟上面也差不多，就是改了一个样式
.wrap{
width: 500px;
height: 500px;
margin: 50px auto;
}
.tab{
height: 50px;
}
.tab .item{
float: left;
width: 100px;
height: 100%;
text-align: center;
line-height: 50px;
}
.tab .item.current{
background-color: #000;
color: #fff;
}
.page{
position: relative;
height: 450px;
border: 1px solid #000;
overflow: hidden; /*超出的部分不显示*/
}
.page .page-wrap{
height: 100%;
}
.page .page-wrap .item{
height: 100%;
font-size: 100px;
text-align: center;
line-height: 450px;
}
.page .page-wrap.position-wrap{
position: absolute;
top: 0;
left: 0;
width: 1500px;
}
.page .page-wrap.position-wrap .item{
float: left;
width: 500px;
}
这里同样也使用了tools.js这个文件，代码在上面
index.js代码：
;(function (doc, initTools) {
var oTab = doc.getElementsByClassName('J_tab')[0],
oPage = doc.getElementsByClassName('J_page')[0],
oTabItems = oTab.getElementsByClassName('item'),
oPageWrap = oPage.getElementsByClassName('page-wrap')[0],
curIdx = 0
var init = function(){
bindEvent()
}
function bindEvent(){
oTab.addEventListener('click', onTabClick, false)
}
function onTabClick(e){
var target = initTools.getTarget(e)
if(target.className == 'item'){
curIdx = target.getAttribute('data-index')
render(target, curIdx)
}
}
function render(target, curIdx){
for(var i=0; i<oTabItems.length; i++){
oTabItems[i].className = 'item'
}
target.classList.add('current')
oPageWrap.style.left = (-500*curIdx) + 'px'
}
init()
})(document, initTools)