<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .btn{

            margin: 20px 120px;

            width: 80px;

        }

        .content{

            margin: 10px auto;

            display: none;

        }

        .btn.active{

            background-color: pink;

        }

        .content.show{

            display:block;

        }

    </style>

</head>

<body>

    <p class="btn1">

        <button class="btn active">页面一</button>

        <button class="btn">页面二</button>

        <button class="btn">页面三</button>

    </p>

    <div class="content show">

         <p>页面一要显示的内容</p>

         <input type="text" placeholder="页面一内容"/>

    </div>


    <div class="content">

          <p>页面二要显示的内容</p>

          <input type="text" placeholder="页面二内容" />

    </div>

    <div class="content" >

          <p>页面三要显示的内容</p>

          <input type="text" placeholder="页面三内容"/>

    </div>

    <script>
　　　　　//获取页面的每个按钮

        var btns = document.getElementsByClassName("btn")
　　　　　//获取内容盒子

        var contents = document.getElementsByClassName("content")

　　　　　//遍历每个按钮为其添加点击事件

        for(var i=0;i<btns.length;i++){

            btns[i].index = i;

            btns[i].onclick = function(){
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容

                for(var j=0;j<btns.length;j++){

                    btns[j].className = btns[j].className.replace(' active', '').trim();

                    contents[j].className = contents[j].className.replace(' show', '').trim();

                }

                this.className = this.className + ' active';

                contents[this.index].className = contents[this.index].className + ' show';

            };

        }

    </script>

</body>

</html>

js实现点击不同按钮切换内容的更多相关文章

  1. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  2. JQ实现点击两个按钮切换内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. js实现点击上下按钮，图片向上向下循环滚动切换

    //popup.js //jquery.1.4.2-min.js (function(p,j){function u(){if(!c.isReady){try{v.documentElement.do ...

  4. js实现点击一个按钮进行两种状态的切换（toggle）

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  5. 点击按钮切换内容效果(使用CSS DIV与JavaScript)

    <head><script type="text/javascript">function change_div(id){  if (id == 'gsyw ...

  6. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  7. js实现点击修改按钮之后单元格变成可编辑状态

    主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...

  8. js在点击的按钮下面弹框

    效果如图,点击对应的按钮时,弹框会在对应的按钮下面显示,可以应用于列表等场景 前端代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  9. vue点击编辑按钮，内容变成input可以修改，也可以删除

    一.效果 图1 图2,点击报错之后,又变成图1的效果 二.使用到了element UI中的以下组件: <el-button> <el-input> 三.使用的关键点是vue中的 ...

随机推荐

  1. 9组-Alpha冲刺-3/6

    一.基本情况 队名:不行就摆了吧 组长博客:https://www.cnblogs.com/Microsoft-hc/p/15546622.html 小组人数: 8 二.冲刺概况汇报 卢浩玮 过去两天 ...

  2. 大爽Python入门教程 1-5 答案

    大爽Python入门公开课教案 点击查看教程总目录 1 方向变换 >>> 51//4 12 >>> 51%4 3 答: 向左转51次之后, 小明面朝东方, 转过了1 ...

  3. Ultraedit和写字板修改Tomcat 6.0的server.xml不生效

    转:http://blog.csdn.net/greencacti/article/details/6615321 本人在修改Tomcat 6.0的server.xml的时候,发现写字板修改完保存的时 ...

  4. [cf1379F]Chess Strikes Back

    考虑将$(2i-1,2j-1)$和$(2i,2j)$缩为一个点,记作$(i,j)$ 对于每一个点,只能选$(2i-1,2j-1)$或$(2i,2j)$(显然不能都选),而这样恰好为$nm$个,因此必须 ...

  5. Hbuilder/Uniapp 格式化的时候，很多属性会排列在一行，如何结局？

    因为自己遇到这个问题,然后百度了很久都得不到解决办法,所以解决问题以后在博客园写下此文,希望能帮助到更多人! //在jsbeautifyrc.js里面的html中加入这个,就OK了 "wra ...

  6. 计算机网络 | 从 ChanelOption 到 Netty 底层

    概述 ChannelOption 是 Netty 中在构建引导类时可以填写的构建 Channel 的选项 其可以分为两部分,一部分为控制 Netty 自身底层运行的选项:另一部分则是操作系统创建 so ...

  7. 在Winform框架的多文档界面中实现双击子窗口单独弹出或拖出及拽回的处理

    在基于DevExpress的多文档窗口界面中,我们一般使用XtraTabbedMdiManager来管理多文档窗口的一些特性,如顶部菜单,页面的关闭按钮处理,以及一些特殊的设置,本篇随笔介绍这些特点, ...

  8. AT2558 [ARC073D] Many Moves

    开始被标签带骗了. 考虑一个\(dp\),\(f[i][j]\)代表有一个棋子在\(x_i\),另外一个\(j\)的最小答案. 那么考虑转移. 如果\(j != x_{i - 1}\) 那么答案自然贡 ...

  9. 洛谷 P4099 - [HEOI2013]SAO（树形 dp）

    题面传送门 题意: 有一个有向图 \(G\),其基图是一棵树 求它拓扑序的个数 \(\bmod (10^9+7)\) \(n \in [1,1000]\) 如果你按照拓扑排序的方法来做,那恐怕你已经想 ...

  10. 洛谷 P7620 - CF1431J Zero-XOR Array（状压 dp）

    洛谷题面传送门 首先显然题目等价于求有多少个长度 \(n-1\) 的序列 \(b\) 满足 \(a_i\le b_i\le a_{i+1}\),满足 \(b_1\oplus b_2\oplus\cdo ...