本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！js如何实现button改变某div内文字内容显示的效果（代码实例）
收藏 本篇文章给大家带来的内容是介绍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>
