js实现简单选项卡制作

本文实例为大家分享了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" rel="external nofollow" >
</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';
  }
}

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现简单选项卡功能

    本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下 首先我们来写HTML代码,构建出整体结构 代码如下: <!--导航栏部分HTML代码--> <nav id="nav"> <ul> <li class="act">选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> &

  • 用JS实现选项卡

    本文实例为大家分享了JS实现选项卡的具体代码,供大家参考,具体内容如下 案例描述 在浏览器中显示一个选项卡界面,头部为1.2.3.4.5.点击头部任意一个数字,都在下方显示出不同的信息,并且鼠标停留在任意一个数字上时,数字的颜色改变.案例如下图所示 默认的是数字1中的内容 点击数字二 点击其他数字依此类推,在这里就不一一展示了 HTML代码 全部HTML代码展示 <div id="table"> <!-- 头部 --> <div id="head

  • js实现选项卡效果

    本文实例为大家分享了js实现选项卡效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/javascript"> window.onload=function(){ var ob = document.getElementById('div1'); var ob1 = d

  • JS实现选项卡实例详解

    JS实现选项卡实例详解

    本文实例讲述了JS实现选项卡的方法.分享给大家供大家参考,具体如下: 思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的. 1.首先获取元素. 2.for循环历遍按钮元素添加onclick 或者 onmousemove事件. 3.因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none. 4.把当前按钮添加样式,把当前DIV显示出来,display设置为bl

  • JavaScript实现Tab选项卡切换

    JavaScript实现Tab选项卡切换

    本文实例为大家分享了js实现选项卡切换的具体代码,供大家参考,具体内容如下 会用到原生js的dom操作 html <body> <div id="tab"> <div id="tab_header"> <ul> <li class="seclect">1</li> <li>2</li> <li>3</li> <li>

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • 原生js实现下拉选项卡

    原生js实现下拉选项卡

    本文实例为大家分享了js实现下拉选项卡的具体代码,供大家参考,具体内容如下 效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉选项卡</title> <style> *{ padding: 0px; margin: 0px; font-family: "微软雅黑"; font-siz

  • js实现简单的可切换选项卡效果

    js实现简单的可切换选项卡效果

    本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12

  • 使用vue.js写一个tab选项卡效果

    使用vue.js写一个tab选项卡效果

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti

  • js选项卡的实现方法

    本文实例讲述了js选项卡的实现方法.分享给大家供大家参考.具体分析如下: 一.思路 1. 获取元素: 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件: 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none. 4. 点击当前按钮添加样式,把当前div显示出来,display设置为block. 二.html代码: <div id="div1"> <inpu

  • JS实现简单tab选项卡切换

    本文实例为大家分享了JS实现简单tab选项卡切换的具体代码,供大家参考,具体内容如下 本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab效果</title> <style type="

随机推荐