<!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. js数组之sort排序的用法

    sort排序 转载自:https://blog.csdn.net/idomyway/article/details/80544509 js中用方法sort()为数组排序.sort()方法有一个可选参数 ...

  2. jquery.jtable的事件

    前景提要最近在使用abp zero框架帮朋友搭建一个工厂管理系统.其中有一块功能的话是通过定时爬虫拉取当日的铝价.铝价展示用的是abp zero框架中土牛写的jquery.jtable,铝价需要根据当 ...

  3. c#使用dynamic关键字传输数据的用法

    问: 在实际开发中,特别是在ORM框架的基础下,我们返回的数据都是强类型的实体对象.如果是单表查询我们就可以直接返回对应的实体,如果是多表联合查询,我们可能就需要各个表中都返回一部分字段,组成一个新的 ...

  4. mysql 架构篇系列 1 复制原理和复制架构

    一. 复制概述 mysql 从3.23版本开始提供复制功能,复制是指将主数据库的ddl和dml操作通过二进制日志传到复制服务器(也叫从服务器)上,然后在从服务器上对这些日志重新执行(也叫重做),从而使 ...

  5. [工具向]__申请,下载,使用百度地图api

    前言 api即应用程序接口,在我们的日常开发中,我们不仅可以在开源代码仓库(,github,码云)中获得很大的帮助,在日常开发中占重要地位的另一个东西就是api,我们可以使用众多的第三方编写的优秀的a ...

  6. 使用docker搭建数据分析环境

    注:早在学习<云计算>这门课之前就已经知道docker,学习这门课时老师还鼓励我们自己尝试一下:但是直到去年年底才有机会尝试,用过之后感觉确实很好用.最近需要部署几个shiny应用,又回顾 ...

  7. leetcode — longest-valid-parentheses

    import java.util.Stack; /** * Source : https://oj.leetcode.com/problems/longest-valid-parentheses/ * ...

  8. 网络编程第三讲UDP编写

    网络编程第三讲UDP编写 一丶UDP简介 UDP是面向无连接的.就是说数据传输会丢掉.网络延时比较大的情况下.会早上丢包.例如视频通话.就是UDP UDP不需要建立建立. 下面有UDP编写流程图 下图 ...

  9. 【Vue.js】vue项目目录作用

    1. build文件夹:打包配置的文件夹 1.1  webpack.base.conf.js :打包的核心配置 1.2  build.js:构建生产版本,项目开发完成之后,通过build.js打包(加 ...

  10. MySQL的使用及优化

    前言 最近听了公司里的同事做的技术分享,然后觉得对自己还是挺有帮助的.都是一些日常需要注意的地方,我们目前在开发过程中,其实用不到MySQL太深的内容的.只是能适用我们日常开发的知识就可以了.所以我将 ...