cari

Rumah >hujung hadapan web >tutorial js >js如何实现button改变某div内文字内容显示的效果（代码实例）

js如何实现button改变某div内文字内容显示的效果（代码实例）

青灯夜游
青灯夜游ke hadapan
2018-10-24 15:49:543308semak imbas

本篇文章给大家带来的内容是介绍js如何实现button改变某div内文字内容显示的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

<!DOCTYPE html>
<html>
<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>辣鸡游戏</div>
<div>
<button>第一关</button>
<button>第二关</button>
<button>第三关</button>
<button>第四关</button>
<div>你就是个大傻逼</div>
<div>辣鸡</div>
<div>废物</div>
<div>蠢狗</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=&#39;&#39;;
            div[j].style.display=&#39;none&#39;;
            }
        this.className=&#39;active&#39;;
        div[n].style.display=&#39;block&#39;;
        div[n].p
        
        }
    }(i))
}

</script>
</body>
</html>

1.png

2.png

 

Atas ialah kandungan terperinci js如何实现button改变某div内文字内容显示的效果（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:cnblogs.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：js克隆的理解之深层克隆和浅层克隆（代码实例）Artikel seterusnya：js中的原型链、闭包四种作用、继承、命名空间、枚举类型是什么？

Artikel berkaitan

Lihat lagi