原生JS项目练习——tab选项卡功能

一、主要功能介绍：

1、写UI结构

2、获取元素

3、for循环遍历数组，给每一个li添加一个index属性并赋值。（原因等会会总结）

4、绑定鼠标的mousemove事件，鼠标移到某个模块，将该模块变色，换上相应的图片

5、当鼠标离开li的时候，就让当前li的背景颜色改变为原来的颜色,图片隐藏

6、鼠标离开ul的时候，将li模块和图片恢复到刚开始的样子

7、主要实现tab栏的来回切换操作

原生JS好，前端学的才是真的好，对以后的发展有很大的作用

二、详细步骤解析：

HTML和CSS代码：

简单写html和css的代码，样式如下：

<style>* {margin: 0;padding: 0;}.main {width: 350px;margin: 0 auto;}.container {padding-top: 10px;width: 600px;height: 60px;font-size: 0;}.container li {width: 150px;height: 60px;display: inline-block;text-align: center;line-height: 60px;background-color: #eee;list-style: none;font-size: 20px;}.container li:nth-child(1) {background-color: orange;}.box {margin-top: 40px;width: 600px;height: 400px;background-size: cover;}.box img {display: none;width: 100%;height: 100%;}.box img:nth-child(1) {display: block;}</style>
</head><body><div class="main"><ul class="container"><li>大橘</li><li>汪汪</li><li>库库</li><li>斑点</li></ul><div class="box"><img src="1.jpg" alt=""><img src="2.jpg" alt=""><img src="3.jpg" alt=""><img src="4.jpg" alt=""></div>

JS代码：

主要步骤：

1、获取元素

2、for循环遍历数组，给每一个li添加一个index属性并赋值。（原因等会会总结）

3、绑定鼠标的mousemove事件，鼠标移到某个模块，将该模块变色，换上相应的图片

4、当鼠标离开li的时候，就让当前li的背景颜色改变为原来的颜色,图片隐藏

5、鼠标离开ul的时候，将li模块和图片恢复到刚开始的样子

6、主要实现tab栏的来回切换操作

 <script>var lis = document.querySelectorAll("ul li");var imgs = document.querySelectorAll(".box img");var container = document.querySelector(".container");let flag = 0;// 当鼠标移入某个li的时候，就将该li的背景颜色改变for (let i = 0; i < lis.length; i++) {// 在进行for循环的时候，给每一个li的index属性赋值lis[i].index = i;lis[i].onmouseover = function() {// for循环，每次都将图片清空for (let j = 0; j < imgs.length; j++) {imgs[j].style.display = "none";}this.style.backgroundColor = "orange";imgs[this.index].style.display = "block";if (this.index == 0) {flag = 1} else {falg = 0}}// 当鼠标离开li的时候，就让当前li的背景颜色改变为原来的颜色,图片隐藏lis[i].onmouseout = function() {this.style.backgroundColor = "#eee";imgs[this.index].style.display = "none"}}// 当鼠标离开ul的时候，让li的第一个变成orange，图片变成第一张图片container.onmouseleave = function() {lis[0].style.backgroundColor = "orange"imgs[0].style.display = "block"flag = 0}container.onmouseenter = function() {if (flag) {lis[0].style.backgroundColor = "orange"} else {lis[0].style.backgroundColor = "#eee";}}</script>

感谢：@爱吃鱼的猫

原生JS项目练习——tab选项卡功能相关推荐

原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
同一页面实现多个Tab选项卡功能
同一页面实现多个TAB选项卡功能下载地址: http://down.51cto.com/data/988585 本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/x ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
android 自定义多tab悬浮控件,Android编程实现自定义Tab选项卡功能示例
本文实例讲述了Android编程实现自定义Tab选项卡功能.分享给大家供大家参考,具体如下: import android.app.TabActivity; import android.conten ...
使用JS实现简单的选项卡功能
首先我们来写HTML代码,构建出整体结构代码如下:  <nav id="nav"><ul><li ...
原生JS项目练习——全选与全不选和反选
目录一.主要功能介绍: 二.JS代码详细步骤解析: JS代码: 三.全部代码: 感谢:@有鱼是只猫提供的视频一.主要功能介绍: 1.用原生JS实现全选:用for循环遍历每一个input,让他全部选 ...
js购物车功能php,实战项目：用原生JS实现一个购物车的功能
实战:购物车功能一.两个实用的数组函数 1.1 Array.every() every()方法传入回调函数,这个回调函数有三个参数,分别是: item:用于测试的当前值: index:当前测试值的索 ...
原生js实现图片上传功能
在项目中用到了原生的上传功能,html5代码如下 <div class="uploadimg"><div v-for="(item, index) in ...