<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

<style>

*{ padding:0px;

    margin:0px;}

.wrapper div{display:none;

    width:200px;

    height:250px;

    border:10px solid #FF3;

    }

div.start{text-align:center;

    display:block;

    width:200px;

    border:5px solid #F00;

    }

.active{

    background-color:orange;}

    </style>

</head>

<body>

<div class='start'>辣鸡游戏</div>

<div class='wrapper'>

<button>第一关</button>

<button>第二关</button>

<button>第三关</button>

<button>第四关</button>

<div class='content'>你就是个大傻逼</div>

<div class='content'>辣鸡</div>

<div class='content'>废物</div>

<div class='content'>蠢狗</div>

</div>

<script>

var btn = document.getElementsByTagName('button');

var div = document.getElementsByClassName('content');

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

    (function(n){

    btn[n].onclick = function(){

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

            btn[j].className='';

            div[j].style.display='none';

            }

        this.className='active';

        div[n].style.display='block';

        div[n].p

        }

    }(i))

}

</script>

</body>

</html>

button改变某div内文字内容的显示的更多相关文章

  1. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  2. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  3. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...

  4. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  5. css+div解决文字溢出控制显示字数

    一.一般的文字截断(适用于内联与块):  Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...

  6. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  7. 表格中的td内的div的文字内容禁止换行一行显示的css

    td { white-space: nowrap } td div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ...

  8. div内文字显示两行，多出的文字用省略号显示

    用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...

  9. Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

    由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...

随机推荐

  1. [P4721] 分治 FFT

    「题意」给定\(g[0]=1\),\(g[1~n-1]\)求序列\(f[i]=\sum_{j=1}^i f[i-j]*g[j]\ , i\in[1,n-1],f[0]=1\). 「分析」分治处理区间[ ...

  2. 持续集成工具之Jenkins

    Jenkins是一个很好的持续集成工具,不光可以帮助开发进行自动打包,自动验证升级和安装,也可以帮助测试人员定时执行测试任务,或者在开自动打包安装之后自动执行测试任务,实现打包-安装-测试一条线服务, ...

  3. 我可能不懂Array.prototype.sort

    今天 fix 我们后台系统的一些 bug.系统是基于 beego 和模板开发的,各种前后端代码揉作一团,没有格式,没有 eslint,全局变量满天飞,连 js 代码都有后端的插值,读起来非常 酸爽. ...

  4. 【转载】“宇宙最强” IDE，Visual Studio 2019 正式发布

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文由葡萄城翻译并发布 今天凌晨Visual Studio 2019已经正式发布,现在已经可以下载了.使用V ...

  5. 项目ITP(六) spring4.0 整合 Quartz 实现动态任务调度

    前言 系列文章:[传送门] 项目需求: http://www.cnblogs.com/Alandre/p/3733249.html 上一博客写的是基本调度,后来这只能用于,像每天定个时间 进行数据库备 ...

  6. java如何获取一个double的小数位数

    前言 看标题是不是觉得这是一个很简单的问题,我一开始也是这么认为的,但是实际情况下,在各种情况下我们都进行了测试,发现很多实际情况是无法不尽如人意的. 方法分析 当前能想到的比较容易有下面几种 1.直 ...

  7. SpringBoot2.0源码分析（三）：整合RabbitMQ分析

    SpringBoot具体整合rabbitMQ可参考:SpringBoot2.0应用(三):SpringBoot2.0整合RabbitMQ RabbitMQ自动注入 当项目中存在org.springfr ...

  8. 又是一个Notepad++的问题

    昨天刚刚解决了Style Configurator无法保存的问题,今天继续解决另一个. 装好Notepad++之后,可以在右键菜单里面看到 Edit With Notepad++,win7里面挺好用的 ...

  9. Spring之InstantiationAwareBeanPostProcessor接口介绍

      InstantiationAwareBeanPostProcessor接口是BeanPostProcessor的子接口,通过接口字面意思翻译该接口的作用是感知Bean实例话的处理器.实际上该接口的 ...

  10. 如何将各种低版本的discuz版本升级到discuz x3.0

    最近在做discuz改版的项目,遇到了很多问题,相信很多拥有discuz论坛的版主,站长和程序猿在升级或改版discuz的过程中遇到过和我一样的问题,所以我开了一个discuz专栏,为大家讲解一下di ...