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 相关文章推荐
改善用户体验的五款jQuery插件分享
May 22 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
vue params、query传参使用详解
Sep 12 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 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
PHP Stream_*系列函数
2010/08/01 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
ext jquery 简单比较
2010/04/07 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python 字符串和整数的转换方法
2018/06/25 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
银行职业规划书范文
2013/12/28 职场文书
商铺租赁意向书
2014/04/01 职场文书
研究生求职自荐书
2014/06/23 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
八年级英语教学反思
2016/02/15 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android