前端基础之tab栏切换

最新推荐文章于 2025-03-25 17:30:32 发布

京都小白

最新推荐文章于 2025-03-25 17:30:32 发布

阅读量664

点赞数

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

本文链接：https://blog.csdn.net/m0_53602804/article/details/128768784

版权

前端专栏收录该内容

8 篇文章

订阅专栏

最近开始基础学前端，记录一下练习的一些基础功能，不过这是原生的，等到框架说不定就不用这么写了，管他的，先记下再说。

<!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>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
<div class="tab">
  <div class="tab_list">
    <ul>
      <li class="current">商品介绍</li>
      <li>规格与包装</li>
      <li>售后保障</li>
      <li>商品评价</li>
      <li>手机社区</li>
    </ul>
  </div>
  <div class="second_list">
    <div class="item" style="display:block;">
      商品介绍内容
    </div>
    <div class="item">
      规格与包装内容
    </div>
    <div class="item">
     售后保障内容
    </div>
    <div class="item">
      商品评价内容
    </div>
    <div class="item">
     手机社区内容
    </div>
  </div>
</div>
</body>
<script src="style.js"></script>
</html>

*{
    margin:0;
    padding:0;
}
.tab{
    position: absolute;
    top:30%;
    left:30%;
}
.tab_list li{
    list-style: none;
    line-height: 39px;
    height:39px;
    text-align:center;
    padding:0 20px;
    float:left;
    background-color: antiquewhite;
    cursor:pointer;


}
.tab_list .current{
    background-color: red;
    color:white;
}
.item_info{
    display: block;
    padding:20px 0 0 20px;
}
.item{
    display:none;
}

var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li'); 
var item = document.querySelectorAll('.item');
for(var i =0;i<lis.length;i++)
{
    lis[i].setAttribute('index',i);
    //先把所有框的红去掉,再标红
    lis[i].onclick = function(){
        for(var i=0;i<lis.length;i++){
        lis[i].className='';
        item[i].style.display="none";
        }
        this.className='current';
        var index = this.getAttribute('index');
        item[ index].style.display="block";
       
    }

}

在这里插入图片描述

功能就是点击上面表格的每一格，下面的页面就会发生变化，我觉得这个功能在很多地方也能用得到，记录一下实现的算法思想，首先用html和css写好静态页面，再用js实现逻辑功能。先实现上面的点击哪个哪个背景变红，用循环给每个栏设置一个事件，点到这个栏的时候先把所有栏背景设置为黄色，再把这个栏的背景设置为红色，下面转换功能的实现就是给上面每个栏设置一个序号的自定义属性，用这个序号把下面的方块和上面的栏结合起来，点哪个栏，哪个方块就被显示，其他的都被隐藏，这里采用的是转换类的方法。