<!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. 菜鸟Markdown笔记，看这个就够了

    菜鸟markdown语法笔记 1.标题 写法:共六级标题,一个#是一级标题,两个#是二级标题,三个#是三级标题······以此类推 (#)+空格键,快捷方式是Ctrl+1/2/3/4/5/6 2.段落 ...

  2. FZU ICPC 2020 寒假训练 1

    B - Sum Problem In this problem, your task is to calculate SUM(n) = 1 + 2 + 3 + ... + n. Input The i ...

  3. 问题 B: 喷水装置（二）(在c++上运行有错误，提交AC了)

    题目描述 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n(n<=10000)个点状的喷水装置,每个喷水装置i喷水的效果是让以它为中心半径为Ri的圆都被润湿.请在给出的喷水装 ...

  4. 一个开源的C#和cefsharp项目：逐浪字体大师pc版上线（附源码开源）

    z01逐浪字体大师,是一款基于C#和web引擎开发的字体设计软件,可以打开直接写字,也可以链接官方资源 ,附Github开源库,欢迎大家下载.客户端技术是基于wpf设计的,整个界面精美,与逐浪CMS技 ...

  5. Kubernetes 中的 gRPC 负载均衡

    安装环境依赖 docker-desktop >= 4.1.1 kubernetes >= 1.21.5 go >= 1.17 protobuf >= 3.17.3 istioc ...

  6. 大爽Python入门教程 总目录

    作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 大爽Python入门公开课教案 本篇博客为公开课教案目录,正文内容在目录章节链接的博客里 除目录本身外,没有链接的章节, ...

  7. Fastjson妙用之@JSONField注解

    在开发的过程中使用json格式的地方非常多,现在前后端分离的项目中,前后端数据交换的格式一般为json,这种格式的优/缺点这里不再赘述,感兴趣的可以百度.把java中的实体类序列化为json的方式也有 ...

  8. 基于Guava API实现异步通知和事件回调

    本文节选自<设计模式就该这样学> 1 基于Java API实现通知机制 当小伙伴们在社区提问时,如果有设置指定用户回答,则对应的用户就会收到邮件通知,这就是观察者模式的一种应用场景.有些小 ...

  9. APM监控--（三）zipkin部署手册

    一,基础知识储备分布式跟踪的目标一个分布式系统由若干分布式服务构成,每一个请求会经过多个业务系统并留下足迹,但是这些分散的数据对于问题排查,或是流程优化都很有限,要能做到追踪每个请求的完整链路调用,收 ...

  10. 单线程 Redis 为什么这么快，看看这篇就知道了

    Redis 作为一种 KV 缓存服务器,有着极高的性能,相对于 Memcache,Redis 支持更多种数据类型,因此在业界应用广泛. 记得刚毕业那会参加面试,面试官会问我 Redis 为什么快,由于 ...