<!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. sql sever 约束

    SQLServer中有五种约束,Primary Key约束.Foreign Key约束.Unique约束.Default约束和Check约束 1.Primary Key约束在表中常有一列或多列的组合, ...

  2. Oracle system 用户无法登录问题

    新手刚用Oracle数据库时,可能会遇到system用户无法登录情况. 问题原因:1.可能输入默认密码时输入错误(比较低级,一般不会范). 2.可能你在安装的时候设置了密码,但是在登录的时候密码不正确 ...

  3. PHP 数组函数分类整理

    1.处理数组键名相关的函数: array_change_key_case - 返回字符串键名全为小写或大写的数组. array_key_exists - 检查给定的键名或索引是否存在于数组中 arra ...

  4. .net工程师学习vue的心路历程（三）

    vue cli3没记错的话是在2019年8月份yyx个人正式声明发布. 接下来就开始我们的vue cli3的方式创建vue项目.明白一点,vue cli3遵循的一个原则就是 "0配置&quo ...

  5. [cf559E]Gerald and Path

    将所有线段的端点(即$a_{i}$和$a_{i}\pm l_{i}$)离散,并按照$a_{i}$从小到大排序 定义$f_{i,,j}$表示前$i$条线段在位置$j$之前最多能覆盖的长度(默认覆盖到$j ...

  6. [hdu7097]Just a Data Structure Problem

    (四边形不等式的套路题) 对于某一组$a_{i}$,显然可以区间dp,设$f_{l,r}$表示区间$[l,r]$​的答案,则转移即$$f_{l,r}=\begin{cases}0&(l=r)\ ...

  7. [bzoj1711]吃饭

    由于无法直接将果汁和饮料连边,所以将人放在中间,果汁和饮料放在两侧,然后分别向对应的人连边.同时,为了保证每一个人只被算一次,对每一个人裂点,两个点中间连一条流量为1的边. 1 #include< ...

  8. [bzoj2668]交换棋子

    基本思路是,要让所有黑点都相对应(所以首先判断黑点的个数).如果没有交换限制,可以按以下方法建图:源点向所有初始黑点连(1,0)的边,最终黑点向汇点连(1,0)的边,相邻的两点连边(inf,1),最小 ...

  9. [atAGC051C]Flipper

    对于这一个平面用$a_{x,y}$来表示,即$(x,y)$为黑色则$a_{x,y}=1$,否则$a_{x,y}=0$,之后定义$a$能生成$b$当且仅当$a$能够通过若干次操作后得到$b$ 令$p_{ ...

  10. [atAGC007E]Shik and Travel

    二分枚举答案,判定答案是否合法 贪心:每一个叶子只能经过一遍,因此叶子的顺序一定是一个dfs序,即走完一棵子树中的所有叶子才会到子树外 根据这个贪心可以dp,设$f[k][l][r]$表示仅考虑$k$ ...