使用JS来实现tab栏切换

这篇具有很好参考价值的文章主要介绍了使用JS来实现tab栏切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

HTML部分

标题部分<h3>

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

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

<div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">百货</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="../images/tab00.png" alt="" /></div>
      <div class="item"><img src="../images/tab01.png" alt="" /></div>
      <div class="item"><img src="../images/tab02.png" alt="" /></div>
      <div class="item"><img src="../images/tab03.png" alt="" /></div>
      <div class="item"><img src="../images/tab04.png" alt="" /></div>
    </div>
  </div>

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模板字符串会更加灵活,比以前语法更加方便

<Script>
    //1.a模块制作 要给5个链接绑定鼠标经过事件
    //1.1获取a元素
    const as=document.querySelectorAll('.tab-nav a')
    for(let i=0;i<as.length;i++){
      as[i].addEventListener('mouseenter',function(){
        // console.log('鼠标经过')
        // 排他思想,干掉别人,留住自己
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加active
        this.classList.add('active')
        //下面五个盒子一一对应 。item
        //干掉别人
       document.querySelector('.tab-content .active').classList.remove('active')
        //对应序号的那个item 显示添加active
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
        
      })
    }
   </Script>

这就是大概全部内容

接下来是源码

  1. <!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>tab栏切换</title>
      <style>
        * {
          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;
        }
      </style>
    </head>
    
    <body>
      <div class="tab">
        <div class="tab-nav">
          <h3>每日特价</h3>
          <ul>
            <li><a class="active" href="javascript:;">精选</a></li>
            <li><a href="javascript:;">美食</a></li>
            <li><a href="javascript:;">百货</a></li>
            <li><a href="javascript:;">个护</a></li>
            <li><a href="javascript:;">预告</a></li>
          </ul>
        </div>
        <div class="tab-content">
          <div class="item active"><img src="../images/tab00.png" alt="" /></div>
          <div class="item"><img src="../images/tab01.png" alt="" /></div>
          <div class="item"><img src="../images/tab02.png" alt="" /></div>
          <div class="item"><img src="../images/tab03.png" alt="" /></div>
          <div class="item"><img src="../images/tab04.png" alt="" /></div>
        </div>
      </div>
       <Script>
        //1.a模块制作 要给5个链接绑定鼠标经过事件
        //1.1获取a元素
        const as=document.querySelectorAll('.tab-nav a')
        for(let i=0;i<as.length;i++){
          as[i].addEventListener('mouseenter',function(){
            // console.log('鼠标经过')
            // 排他思想,干掉别人,留住自己
            document.querySelector('.tab-nav .active').classList.remove('active')
            // 我登基 我添加active
            this.classList.add('active')
            //下面五个盒子一一对应 。item
            //干掉别人
           document.querySelector('.tab-content .active').classList.remove('active')
            //对应序号的那个item 显示添加active
            document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
            
          })
        }
       </Script>
    </body>
    
    </html>

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

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

看完记得给个三连噢!

使用JS来实现tab栏切换

 文章来源地址https://www.toymoban.com/news/detail-467193.html

到了这里,关于使用JS来实现tab栏切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现tab切换

    循环一个数组,切换数据的时候根据index索引来动态的设置选中项,设置fixed定位,固定在顶部。

    2024年02月16日
    浏览(48)
  • uniapp实现tabs切换(可滑动)

    继续加油呀~

    2024年02月11日
    浏览(43)
  • 微信小程序实现页面tab切换

    客户端开发过程中,实现页面切换是一个很常见的场景,本文将介绍一下微信小程序是如何实现页面tab切换的。 小程序一个页面相关的文件结构如下: 话不多说直接上代码。 (1)index.js,代码如下: (2)index.wxml,代码如下: (3)index.wxss,代码如下: 运行结果如下: 本文主要介

    2024年02月04日
    浏览(53)
  • 微信小程序实现滑动/点击切换Tab

    👏 swiper+scroll-view实现滑动/点击切换Tab,以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏! 2.1 scroll-view实现tab列表 scroll-view: 可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px。 scroll-x(bool

    2024年01月19日
    浏览(111)
  • 【微信小程序】实现页面tab切换效果

    目录 前言 本次效果展示 一、如何实现页面tab 1.使用内置组件scroll-view 2.实现点击时出现的背景样式 3.使用scroll-into-view,实现点击时自动滚动 本次主要内容是介绍页面tab的开发,如何实现tab与页面内容联动呢?关注我就知道!   如下图所示,我们需要使用到红色框框中的属

    2024年02月09日
    浏览(94)
  • 快速掌握微信小程序 tab 切换的实现技巧(可滑动切换)

    微信小程序中的 tab 切换功能可以说是用户所需的一个基础功能。本文将介绍如何通过微信小程序实现 tab 切换功能,为用户带来更为便捷和高效的小程序体验。 其实这个小功能的实现非常简单,只需要通过一个标识控制选项的样式及显示的内容,当我们触发点击或者滑动事

    2024年02月11日
    浏览(71)
  • 微信小程序实现tab切换和数据列表

    上篇文章介绍了微信小程序实现tab切换的一种方案(参考 https://blog.51cto.com/baorant24/6188157 ),感觉代码不是很精简,本文再用一个demo介绍微信小程序如何实现tab切换和数据列表。 微信小程序对应页面文件结构如下: 话不多说,直接上代码: (1)index.js文件,代码如下: (2)index.

    2024年02月05日
    浏览(46)
  • vue实现标签页切换/制作tab组件【详细】

    在vue中实现标签页切换有如下2种方式: ① 使用动态组件 ② 使用路由 当然你可以使用第三方ui来实现,比如Element Plus。不过自己试着实现一下会更好。 这里讲一下第一和第二种方式,以组件实现为重点,那么就先讲一下使用路由的方式。 使用路由实现 Tab切换 首先,在rou

    2024年02月14日
    浏览(47)
  • JavaScript编程实现tab选项卡切换的效果+1

    之前在“圳品”信息系统使用了tab选项卡来显示信息,详见: JavaScript编程实现tab选项卡切换的效果 在tab选项卡中使用其它div来显示信息就出现了问题,乱套了,比如下面的这段代码: 运行效果如下: 可以看到,第1张选项卡中的div id=\\\"div1\\\" class=\\\"blue\\\"选项卡1/div消失了,而第

    2024年02月03日
    浏览(47)
  • uniapp 实现切换tab锚点定位到指定位置

    1.主要使用uniapp scroll-view 组件的scroll-into-view属性实现功能 2.代码如下

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包