js实现简单选项卡制作


Posted in Javascript onAugust 05, 2020

本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下

实现功能

通过点击按钮查看相应的介绍;
按钮相应的变色;
内容相应的切换;

html 文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>选项卡</title>
 <link rel="stylesheet" href="./css/style.css" >
</head>
<body>
 <div id="box">
  <button class="active">HTML</button>
  <button>CSS</button>
  <button>JS</button>
  <div id="html" style="display: block;">HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。</div>
  <div id="css">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</div>
  <div id="js">JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。</div>
 </div>

 <script src="./src/script.js"></script>
</body>
</html>

css 文件

#box div {
 width: 400px;
 height: 300px;
 border: 1px solid black;
 display: none;
 padding: 10px;
}

#box .active {
 background-color: fuchsia;
}

button {
 margin: 10px 40px;
}

js 文件

const oBox = document.querySelector('#box');
const btn = oBox.getElementsByTagName('button');
const div = oBox.getElementsByTagName('div');

for(let i = 0; i < btn.length; i++) {
 btn[i].index = i;

 btn[i].onclick = function() {
  for(let j = 0; j < btn.length; j++) {
   btn[j].className = 'none';
   div[j].style.display = 'none'; 
  }
  this.className = 'active';
  div[this.index].style.display = 'block';
 }
}

效果如下:

js实现简单选项卡制作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
工作中常用js功能汇总
Nov 07 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue 内联样式style中的background用法说明
Aug 05 #Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 #Javascript
微信小程序实现上传照片代码实例解析
Aug 04 #Javascript
JavaScript实现烟花绽放动画效果
Aug 04 #Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 #Javascript
解决vue addRoutes不生效问题
Aug 04 #Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
laravel学习教程之关联模型
2016/07/30 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
python中对list去重的多种方法
2014/09/18 Python
Python实现学生成绩管理系统
2020/04/05 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
django 信号调度机制详解
2019/07/19 Python
浅谈Python type的使用
2019/11/19 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
化工工艺专业求职信
2013/09/22 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL