每天一个JS小项目(一)tab选项卡

最新推荐文章于 2023-02-09 20:31:06 发布

奶茶真好喝~

最新推荐文章于 2023-02-09 20:31:06 发布

阅读量374

点赞数

分类专栏：每天一个JS小项目文章标签： js css html javascript

本文链接：https://blog.csdn.net/xy1505853/article/details/109587090

版权

每天一个JS小项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：为了督促自己学习js，挑战一天一个js常见的小项目。主js，所以css可能比较简单。学习前端的朋友可以一起~

成果展示

tab选项卡在线查看

tab选项卡

布局设计

大致分为选项块和对应的内容块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab选项卡</title>
</head>
<body>
    <div class="tab_content">
        <ul class="tab_nav">
            <li class="tab_nav_active">
                选项一
            </li>
            <li>
                选项二
            </li>
            <li>
                选项三
            </li>
        </ul>
        <span class="tab_nav_anchor" style="transition-duration:300ms"></span>
        <ul class="tab_box">
            <li class="tab_box_active">
                内容一
            </li>
            <li>
                内容二
            </li>
            <li>
                内容三
            </li>
        </ul>

    </div>
</body>

CSS部分

*{
    margin:0px;
    padding: 0px;
}
html,body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tab_content{
    width: 400px;
    height: 300px;
    background-color: #e1f5fe;
}
.tab_content .tab_nav{
    list-style: none;
    display: flex;
}
.tab_content .tab_nav li{
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;    
}
.tab_nav_active{
    color: #00a1d6;
}

.tab_content .tab_box{
    list-style: none;
}
/*设置内容不可见*/
.tab_content .tab_box li{
    display: none;
}
/*选中的内容可见*/
.tab_content .tab_box .tab_box_active{
    display: block;
}
.tab_nav_anchor{
    display: block;
    border-bottom: 2px solid #00a1d6;
    width: 100px;
}

JS部分

<script>
  let tabNav = document.querySelectorAll('.tab_nav>li');
  let tabBox = document.querySelectorAll('.tab_box>li');
  let tabNavActive = document.querySelector('.tab_nav_active');
  let tabBoxActive = document.querySelector('.tab_box_active');
  let navAnchor = document.querySelector(".tab_nav_anchor");
  tabNav.forEach((item,index)=>{//遍历节点
      item.onmouseenter=function(){
          tabNavActive.classList.remove("tab_nav_active");//当前选中的清除选中样式
          tabNavActive=this;
          tabNavActive.classList.add("tab_nav_active");
          tabBoxActive.classList.remove("tab_box_active");
          tabBoxActive=tabBox[index];
          tabBoxActive.classList.add("tab_box_active");
          navAnchor.style.transform=`translateX(${index*100}px)`
      }
  })
</script>

querySelectorAll（）可以获取查找的所有节点，返回节点数组。这里我们获取所有的选项节点数组tabNav 和内容节点数组tabBox 。获取当前选中的选项tabNavActive，和当前展示的内容tabBoxActive 。运用arr.forEach遍历每个节点对其进行操作。步骤如下：

清除原来选中的选项tabNavActive的“选中样式”和显示的内容tabBoxActive的“显示样式”，tabNavActive.classList.remove("tab_nav_active")，tabBoxActive.classList.remove("tab_box_active");
将当前选项设为被选中的选项，当前内容设为可见内容。tabNavActive=this;tabBoxActive=tabBox[index];
选中的选项和内容增加“选中样式”。tabNavActive.classList.add("tab_nav_active");tabBoxActive.classList.add("tab_box_active");

当选项之间切换时，滑动条有个滑动效果。一般的transition不能做到这种效果。那么我们在选项块后面增加一个块元素。通过改变它的translateX来实现这种效果。

<span class="tab_nav_anchor" style="transition-duration:300ms"></span>

当选中某个选项时，其translateX随之改变，translateX(${index*100}px)