使用JS来实现tab栏切换

这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白

个人名片：
 作者简介：一名大一在校生，web前端开发专业
  个人主页：几何小超
 座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
 **学习目标: 坚持每一次的学习打卡，掌握更多知识！虽然都说前端已死，但是就算不靠这个吃饭，学一点东西总比啥也不知道的好
————————————————

所以今天我就来把我学的写成文章给大家欣赏一下下

HTML部分

标题部分

然后导航栏我们使用ul li加a的布局实现

然后第二个盒子开始放图片，放图片需要注意路径噢，不然回显示不出来

    

      
每日特价
      

        
精选
        
美食
        
百货
        
个护
        
预告
      
    
    

      

      

      

      

      

    
  

CSS部分

还是给咱们大盒子设置一个边框装内容

第一个是导航栏设置他的宽和父亲盒子一样宽

高是60px

line-height：然后呢这个是垂直居中

还是给一个弹性盒子，让他们根据宽度来进行合理的布局

大体的布局就是这样子，然后只需要修改字体大小颜色和内外边距即可

 * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }

JS部分

第一步我们需要给a的模块制作鼠标经过事件

所以第一步还是获取a元素

我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环

循环过后我们需要写一个鼠标经过的事件

mouseenter：是鼠标经过这个点执行下面的语句

然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码

 document.querySelector('.tab-nav .active').classList.remove('active')

ClassLIST.remove是消除的意思，消除我们的active这个元素

然后根据对应的序号需要在添加active

document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')

这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉

这里我们使用ES6模板字符串会更加灵活，比以前语法更加方便

这就是大概全部内容

接下来是源码

1. 
   
   
   
     
     
     
     
     
   
   
   
     
   
       
   
         
   每日特价
         
   
           
   精选
           
   美食
           
   百货
           
   个护
           
   预告
         
       
       
   
         
   
         
   
         
   
         
   
         
   
       
     
      
   
   
   

素材来自于百度网盘 请输入提取码 apl的第二天

黑马教程还是很不错滴哈哈

看完记得给个三连噢！