如何利用js实现选项卡效果（超简单）

在开始写我们的选项卡之前，先来看一下最终实现的大概效果：

那废话不多说，接下来就看看如何去实现这个效果。

首先，利用我们的 html 和 css 基础，写出选项卡的基本布局：

html代码：

<div class="news"><ul><li class="active">标题1</li><li>标题2</li><li>标题3</li></ul><ol><li class="active">内容1</li><li>内容2</li><li>内容3</li></ol>
</div>

css样式：

body,div,ul,ol,li{margin: 0;padding: 0;list-style: none;
}
body{position: relative;
}
.news{width: 500px;height: 500px;position: absolute;left: 50vw;top: 50vh;transform: translate(-50%,-50%);display: flex;flex-direction: column;
}
.news ul{width: 100%;display: flex;
}
.news ul li{flex-grow: 1;border: solid black 1px;background-color: #b2b2b3;font-size: 30px;height: 80px;text-align: center;line-height: 80px;cursor: pointer;
}
.news ol{flex-grow: 1;position: relative;
}
.news ol li{width: 100%;height: 100%;font-size: 100px;display: none;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;
}
.news ol li:nth-of-type(1){background-color: #00a0ff;
}
.news ol li:nth-of-type(2){background-color: #f15a23;
}
.news ol li:nth-of-type(3){background-color: #f5a2c0;
}
.news ul li.active{background-color: #fff;border-bottom-color: #fff;
}
.news ol li.active{display: flex;
}

接下来引入JavaScript代码，实现动态切换效果：

var title = document.querySelectorAll('ul li');
var content = document.querySelectorAll('ol li');title.forEach(function (item,key) {item.onclick = function () {title.forEach(function (i,k) {i.className = '';content[k].className = '';});item.className = 'active';content[key].className = 'active';}
})

这里我们使用两个 forEach 对获得的 li 标签的伪数组进行循环遍历，在点击事件内首先将两个列表中的li标签的 class 名全部清空，然后点击那个标签给哪个标签加上 class 名，并绑定对应的内容li。

当然，这里我们做的是点击事件，就是点击切换选项卡，也可以改为鼠标移入事件，就是鼠标移到标题的 li 标签上时自动切换，这里只需改变 js 代码中的事件：

// 这样我们就把点击事件改为鼠标移入事件了
item.onclick    =>    item.onmouseover

虽然样式做了一大堆花里胡哨的，但是关键还是在这短短几行 js 代码中，怎么样，是不是很容易就实现选项卡的效果了：)

如何利用js实现选项卡效果（超简单）相关推荐

js实现雪花效果(超简单)
打个广告,最底下的公众号,可以每天领外卖红包.打车优惠券还有96折充值电费等,需要的可以关注一下哦使用js实现雪花飘落效果,话不多说直接上代码 <!DOCTYPE html> <h ...
如何利用js制作选项卡
今天周一,国庆收假回来工作的第一天.跟假期综合症说拜拜吧!打起精神来干活--- 今天要跟大家分享的是如何利用js制作选项卡,选项卡在各种类型的网站都有大量的使用,选项卡就是通过一个标题点击显示对应的内 ...
如何利用js实现萤火虫效果
如何利用js实现萤火虫效果前言首先分析萤火虫需要的步骤 2.1随机数函数 2.3获取dom和生成随机坐标 2.3创建生成div 3.我们就可以先创建出这个实例 4.最后就是带入我们封装的move缓 ...
dw在php图片滑动切换效果,超简单的图片左右切换滑动
网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现.插件虽方便,但是对于新手的学习并不是最好的.本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能效果预览 ...
JS——如何利用js实现流星雨效果？
文章目录前言一.成果图二.实现步骤 1.html结构 2.css样式 3.js行为总结前言一起来看流星雨啊,没有流星雨?那我们就自己画一个,会动的那种哦,还有闪烁的星星哦~ 一.成果图二 ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...
最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
关于js实现分页效果的简单代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
批处理操作mysql_超简单使用批处理（batch）操作数据库
超简单使用批处理(batch)操作数据库批处理(batch)是什么批处理的执行就好比快递员的工作: 未使用批处理的时候,快递员一次从分发点将一件快递发给客户: 使用批处理,则是快递员将所有要派送的 ...

如何利用js实现选项卡效果（超简单）

html代码：

css样式：

如何利用js实现选项卡效果（超简单）相关推荐

最新文章

热门文章