前端Tab栏实践

最新推荐文章于 2024-09-26 14:24:29 发布

我家空空

最新推荐文章于 2024-09-26 14:24:29 发布

阅读量433

点赞数

分类专栏： javaScript 文章标签：前端 css javascript

本文链接：https://blog.csdn.net/qq_45465526/article/details/121932312

版权

javaScript 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

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)