js-Tabs小案例

案例1：开关灯

来源：微博网页版首页右上角

基本描述：

点击按钮，如果是白天就变成黑夜，如果是黑夜我就变成白天；

知识点

涉及两种状态,flag最合适，每次变化的时候，需要将flag变回来
掌握为元素添加类名去除某一类名的方法：节点.classList.add('类名') 节点.classList.remove('类名')
className = ('类名') 这是节点类名的覆盖！

分析

获取事件源；有哪些事件源
按钮；整个背景
注册事件：鼠标点击按钮
事件处理程序：黑变白，白变黒，按钮上面的文字以及颜色也变

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}.off {width: 100%;height: 100%;background-color: black;}</style>
</head><body><button type="button">关灯</button>
</body><script>let flag = false; // false 表示不是黑天let btn = document.querySelector('button');let body = document.body; // 获取body 有专门的方法,当然使用documnet.querySelect('body');也是可以的btn.onclick = function() {if (!flag) { // 黑天 负负得正flag = true;btn.innerHTML = '开灯';btn.style.backgroundColor = 'red';// body.className = 'off';body.classList.add('off');} else {flag = false;btn.innerHTML = "关灯";// body.className = '';btn.style.backgroundColor = '';body.classList.remove('off');}}
</script>
</html>

案例2：选项卡切换

来源：几乎所有的网站都有

基本描述：

点击某个选项，下面内容框出现对应的内容，其余隐藏。

遇到了一个大bug！ 合理利用控制台，看看什么情况

知识点

上面选项卡和下面的内容应该一一对应！
排他思想，干掉所有人，保留我自己，获取到的是多个所以需要循环操作。
className = ' ' 以及 classList.add(' ') 不需要加符号，直接写类名

分析

获取事件源；有哪些事件源
所有选项框; 以及下面内容框
注册事件：鼠标点击按钮
事件处理程序：将其他（非点击元素）弄成正常状态，只给点击的元素特殊处理。

合理利用控制台，查看bug

基本骨架

骨架直接影响js代码的书写！！

<head><meta charset="UTF-8"><title>tabs点击哪个，哪个就出现</title><style>* {padding: 0;margin: 0;}li {list-style: none;float: left;width: 100px;height: 50px;background-color: #ccc;/* text-align: center; */}li:nth-child(odd) {border-left: 1px solid white;border-right: 1px solid white;}li a {display: block;line-height: 50px;text-decoration: none;/* background-color: red; */width: 100px;height: 50px;text-align: center;/* 若没有display:block 属性给a设置无效 为了让点击li 和 a有相同的效果*/}ul::after {content: '';display: block;height: 0;clear: both;visibility: hidden;}.con {display: none;width: 100px;height: 100px;}.con-active {display: block;}.li-active {background-color: red;}</style>
</head><body><div class="main"><div class="nav"><ul><li class="li-active"><a href="#">首页</a></li><li><a href="#">题库</a></li><li><a href="#">面试</a></li></ul></div><div class="content"><div class="con con-active">首页的内容</div><div class="con">题库的内容</div><div class="con">面试的内容</div></div></div>
</body>

核心代码

<script>// 获取a    排他思想    干掉所有保留自己let lis = document.querySelectorAll('.nav li');let divs = document.querySelectorAll('.content div');for (let i = 0; i < lis.length; i++) {lis[i].onclick = function() {for (let i = 0; i < lis.length; i++) {divs[i].classList.remove('con-active');lis[i].className = ' ';}lis[i].className = 'li-active';divs[i].classList.add('con-active');}}
</script>

案例3：选项和内容不匹配

来源：无，拓展

基本描述：

我觉得视频比，用语言描述更加清晰，本想着直接插入视频，但是只支持上传到前仅支持腾讯视频、优酷视频、哔哩哔哩视频;于是百度了一下如何插入gif，不会的话可以看看这里，图片素材也都放在里面了。

知识点

分析

初始的时候有一张背景图片显示，上面选项图片比下面的内容区域多了一张图片，这时候该怎么做？如何布局？

想清楚一开始是什么样的？

默认图片显示，其余四张图片隐藏
点击之后会发生什么？变化的是什么?【2】
点击之后选项栏，出现边框，但是此时border会改变原来的宽度所以我们用outline代替
默认图片隐藏，出现对应的内容中的图片
事件三要素：
下方文字一一对应出现

获取事件源；选项图片，内容图片，默认图片
注册事件：鼠标点击按钮
事件处理程序：【2】

js-Tabs小案例相关推荐

【Node.js学习小案例】DNS域名解析一
Node.js 百度百科: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/ ...
node.js(node.js+mongoose小案例)_实现简单的注册登录退出
一.前言通过node.js基本知识对node.js基本知识的一个简单应用 1.注册 2.登录 3.退出二.基本内容 1.项目结构搭建如图所示 2.这个小案列中用到了art-template子模板以 ...
node.js入门小案例
nodejs 和 Java node.js是运行在服务端的JavaScript.node.js是一个基于chrome JavaScript 运行时建立的一个平台.底层架构是JavaScript. n ...
js基础-小案例歌词匹配
歌词匹配 const lyricString = "[00:00.000] 作词 : 许嵩\n[00:01.000] 作曲 : 许嵩\n[00:02.000] 编曲 : 许嵩\n[00:22 ...
html如何读取pdf,html页面读取PDF小案例
html页面引用 js添加 window.onload = function (){ var success = new PDFObject({ url: pdf文件路径 }).embed(&quo ...
JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
js定时器实现倒计时小案例
开发工具与关键技术: vscode /javascript 撰写时间:2022/8/19 案例介绍倒计时是网页中经常看到的一个小功能,其实也很简单,掌握了js的日期对象就能写出来了,注意获取时分秒的 ...
Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...

js-Tabs小案例

案例1：开关灯

来源：微博网页版首页右上角

基本描述：

知识点

分析

完整代码

案例2：选项卡切换

来源：几乎所有的网站都有

基本描述：

知识点

分析

基本骨架

核心代码

案例3：选项和内容不匹配

来源：无，拓展

基本描述：

知识点

分析

js-Tabs小案例相关推荐

最新文章

热门文章