原生js实现Tab点击切换

最新推荐文章于 2024-07-22 09:52:49 发布

MuSoul

最新推荐文章于 2024-07-22 09:52:49 发布

阅读量2.7k

点赞数 3

分类专栏： js 文章标签： js html css

本文链接：https://blog.csdn.net/sinat_27798375/article/details/117530900

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

看了下，网上给出的Demo大多是鼠标在移入的时候做tab切换，而我最近的博客项目是希望实现知乎登录页面那样的可以点击切换的tab，所以，我自己实现了一下

切换的实现思路

HTML：
布局方面，我选择了div标签作为容器，做横向排列

<div class="test selected"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

CSS：
因为在做切换时，选中的div是要有区别于其他未被选中div的，所以，可以通过不同的选择器来切换视图不同的状态

.test {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-color: rebeccapurple;
}

.selected {
    background-color: burlywood;
}

JS:
1、为每一个div元素添加点击事件
2、通过点击获取的每一个div的index和当前选中的div的index做对比，如果相等，则表示点击的是已选中的div ，期间不会发生任何变化，反之，之前已选中的div失去选中状态，当前选中div添加选中状态

   function init() {
   // 默认选中的index，起始值为0
       let currentIndex = 0
       let divs = document.getElementsByClassName('test')
       for (let i = 0; i < divs.length; i++) {
           const div = divs[i]
           div.index = i
           div.addEventListener('click', () => {
               if (div.classList.contains('selected')) {
                   currentIndex = div.index
               }
               // 当前正在点选的div是已经选中的div
               if (currentIndex === div.index) {

               } else {
                   let currentDiv = divs[currentIndex]
                   currentDiv.classList.remove('selected')
                   let clickDiv = divs[div.index]
                   clickDiv.classList.add('selected')
                   //更新当前选中div的index
                   currentIndex = div.index
               }
           })
       }
   }
   init()

展示不同内容的实现思路

做tab切换大多都是为了点击不同的item去展示不同的内容，我说一下我的思路

HTML:
放入希望去展示的布局就好

 <div class="first-content">
     第一页
 </div>
 <div class="second-content">
     第二页
 </div>
 <div class="third-content">
     第三页
 </div>
 <div class="fourth-content">
     第四页
 </div>

CSS：
这里我使用了display属性来做视图的切换，而非visibility，这是因为visibility属性只是单纯的做了隐藏和展示，原有的流布局不会改变。

  .first-content,
  .second-content,
  .third-content,
  .fourth-content {
      display: none;
  }

  .first-content {
      display: block;
  }

JS：
这一部分js的工作很简单，只需要拿到所有需要切换的内容，然后根据上面切换获得的index去取值，并修改style就可以

 const contents = document.querySelectorAll('.first-content, .second-content, .third-content, .fourth-content')
    function changeContent(index) {
        for (let i = 0; i < contents.length; i++) {
            const content = contents[i];
            if (index === i) {
                content.style.display = 'block'
            } else {
                content.style.display = 'none'
            }
        }
    }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- tab -->
    <div class="test selected"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <!-- content -->

    <div class="first-content">
        第一页
    </div>
    <div class="second-content">
        第二页
    </div>
    <div class="third-content">
        第三页
    </div>
    <div class="fourth-content">
        第四页
    </div>

</body>

<style>
    .test {
        display: inline-block;
        height: 100px;
        width: 100px;
        background-color: rebeccapurple;
    }

    .selected {
        background-color: burlywood;
    }

    .first-content,
    .second-content,
    .third-content,
    .fourth-content {
        display: none;
    }

    .first-content {
        display: block;
    }
</style>

<script>

    const contents = document.querySelectorAll('.first-content, .second-content, .third-content, .fourth-content')

    function init() {
        let currentIndex = 0
        let divs = document.getElementsByClassName('test')
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i]
            div.index = i
            div.addEventListener('click', () => {
                if (div.classList.contains('selected')) {
                    currentIndex = div.index
                }
                if (currentIndex === div.index) {

                } else {
                    let currentDiv = divs[currentIndex]
                    currentDiv.classList.remove('selected')
                    let clickDiv = divs[div.index]
                    clickDiv.classList.add('selected')
                    currentIndex = div.index
                    changeContent(currentIndex)
                }
            })
        }
    }
    init()

    function changeContent(index) {
        for (let i = 0; i < contents.length; i++) {
            const content = contents[i];
            if (index === i) {
                content.style.display = 'block'
            } else {
                content.style.display = 'none'
            }
        }
    }

</script>

</html>