1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS实现幻动片选项卡</title> 6 </head> 7 <style> 8 .container{ 9 text-align:center; 10 100%; 11 } 12 13 .ppt{ 14 display:none; 15 padding:20px; 16 margin:0px; 17 color:white; 18 text-align:center; 19 height:200px; 20 } 21 .btn{/* 这部分可以改成小圆点、数字*/ 22 background-color: #555; 23 color: white; 24 float: left; 25 border: none; 26 outline: none; 27 cursor: pointer; 28 padding: 14px 16px; 29 font-size: 17px; 30 25%; 31 32 } 33 .btn:hover { 34 background-color: #777; 35 } 36 37 </style> 38 <body> 39 <div class="container"> 40 41 42 <div id="test1" class="ppt" style="background:red"> 43 <h1> 44 幻动片1内容（这里可以先出任何你想要的代码） 45 </h1> 46 </div> 47 <div id="test2" class="ppt" style="background:black"> 48 <h1> 49 幻动片2内容（这里可以先出任何你想要的代码） 50 </h1> 51 </div> 52 <div id="test3" class="ppt" style="background:yellow"> 53 <h1> 54 幻动片3内容（这里可以先出任何你想要的代码） 55 </h1> 56 </div> 57 <div id="test4" class="ppt" style="background:green"> 58 <h1> 59 幻动片4内容（这里可以先出任何你想要的代码） 60 </h1> 61 </div> 62 <!--切换按钮--> 63 <button type="button" class="btn" id="defaultppt" onclick="openppt('test1',this,'red')">幻动片1</button> 64 <button type="button" class="btn" onclick="openppt('test2',this,'black')">幻动片2</button> 65 <button type="button" class="btn" onclick="openppt('test3',this,'yellow')">幻动片3</button> 66 <button type="button" class="btn"onclick="openppt('test4',this,'green')">幻动片4</button> 67 </div> 68 <script> 69 function openppt(pptname,elmnt,color) { 70 var i, ppt, btn; 71 //获得PPT并全隐藏 72 ppt = document.getElementsByClassName("ppt"); 73 for(var i=0;i<ppt.length;i++){ 74 ppt[i].style.display="none"; 75 } 76 //获取切换按钮并且赋值颜色与PPT一样 77 btn=document.getElementsByClassName("btn"); 78 for(var j=0;j<btn.length;j++){ 79 btn[j].style.background=""; 80 } 81 document.getElementById(pptname).style.display = "block"; 82 elmnt.style.backgroundColor = color; 83 84 } 85 // 触发 id="defaultppt" click 事件,第一张要显示出来 86 document.getElementById("defaultppt").click(); 87 </script> 88 </body> 89 </html>