JS實例之選項卡效果，實現點擊對應的顯示效果
阿新 • • 發佈：2017-06-22
http body auto 100% itl elements lis style char
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>無標題文檔</title> 4 <style type="text/css"> 5 *{margin:0px auto;padding:0px;} 6 #wai{width:800px;height:500px;margin-top:100px;} 7 #liebiao{width:100%;height:40px;} 8 .list{width:100px;height:40px;float:left;} 9 .item{widtn:100%;height:400px;} 10 </style> 11 </head> 12 13 <body> 14 <div id="wai"> 15 <div id="liebiao"> 16 <div class="list" onclick="show(‘one‘)" style="background-color:#C00"></div> 17 <div class="list" onclick="show(‘two‘)"style="background-color:#30C"></div> 18 <div class="list" onclick="show(‘three‘)" style="background-color:#CF0"></div> 19 <div class="list" onclick="show(‘four‘)" style="background-color:#3F6"></div> 20 </div> 21 <div class="item" id="one" style="background-color:#C00"></div> 22 <div class="item" id="two" style="background-color:#30C"></div> 23 <div class="item" id="three" style="background-color:#CF0"></div> 24 <div class="item" id="four" style="background-color:#3F6"></div> 25 </div> 26 27 </body> 28 <script type="text/javascript"> 29 function show(id){ 30 var a=document.getElementsByClassName("item"); 31 for(var i=0;i<a.length;i++){ 32 a[i].style.display ="none"; //讓所有下面的div隱藏 33 } 34 document.getElementById(id).style.display ="block"; //讓該選中的顯示 35 } 36 </script> 37 </html>
JS實例之選項卡效果，實現點擊對應的顯示效果