【yoyo】点击切换图片
生活随笔
收集整理的這篇文章主要介紹了
【yoyo】点击切换图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊對應按鈕顯示對應圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title></title><style type="text/css">.btn{width: 100px; color: red;font-size: 20px;background-color: yellow;display: inline-block;text-align: center;}.showDiv{width: 400px;height: 200px;background-color: cyan;color: red;font-size: 30px;text-align: center;}.hidden{display: none;}</style></head>
<body>
<div><span class="btn">1</span><span class="btn">2</span><span class="btn">3</span><span class="btn">4</span>
</div>
<div class="showDiv">第一塊</div>
<div class="showDiv hidden">第二塊</div>
<div class="showDiv hidden">第三塊</div>
<div class="showDiv hidden">第四塊</div>
</body>
<script type="text/javascript">var btn=document.getElementsByClassName('btn');var showDiv=document.getElementsByClassName('showDiv');for( var i=0;i<btn.length;i++){(function(a){btn[i].οnclick=function(){//讓所有btn背景顏色初始化為黃色for(var j= 0 ; j < btn.length ; j++){btn[j].style.backgroundColor = "yellow";showDiv[j].style.display="none";}//this指向的是觸發事件的元素 this.style.backgroundColor="gray";showDiv[a].style.display="block";}})(i);}
</script>
</html>
效果展示
總結
以上是生活随笔為你收集整理的【yoyo】点击切换图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 由Maleimide参与的Biotin-
- 下一篇： 和YOYO表白