js如何實現button改變某div內文字內容顯示的效果（代碼實例）

來源：懂視網責編：小采時間：2020-11-27 19:29:31

js如何實現button改變某div內文字內容顯示的效果（代碼實例）

js如何實現button改變某div內文字內容顯示的效果（代碼實例）:本篇文章給大家帶來的內容是介紹js如何實現button改變某div內文字內容顯示的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。<!DOCTYPE html> <html> <head> <meta charset="

推薦度：

點擊下載本文 文檔為doc格式

導讀js如何實現button改變某div內文字內容顯示的效果（代碼實例）:本篇文章給大家帶來的內容是介紹js如何實現button改變某div內文字內容顯示的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。<!DOCTYPE html> <html> <head> <meta charset="

本篇文章給大家帶來的內容是介紹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='';
 div[j].style.display='none';
 }
 this.className='active';
 div[n].style.display='block';
 div[n].p
 
 }
 }(i))
}

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