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 width: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{/* 这部分可以改成小圆点、数字*/22background-color: #555;23color: white;24float: left;25border: none;26outline: none;27cursor: pointer;28padding: 14px 16px;29font-size: 17px;30width: 25%;31 32 }33 .btn:hover {34background-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" οnclick="openppt('test1',this,'red')">幻动片1</button>64<button type="button" class="btn" οnclick="openppt('test2',this,'black')">幻动片2</button>65<button type="button" class="btn" οnclick="openppt('test3',this,'yellow')">幻动片3</button>66<button type="button" class="btn"οnclick="openppt('test4',this,'green')">幻动片4</button>67 </div>68 <script>69function openppt(pptname,elmnt,color) {70var i, ppt, btn;71//获得PPT并全隐藏72 ppt = document.getElementsByClassName("ppt");73 for(var i=0;i<ppt.length;i++){74ppt[i].style.display="none";75 }76//获取切换按钮并且赋值颜色与PPT一样77 btn=document.getElementsByClassName("btn");78 for(var j=0;j<btn.length;j++){79btn[j].style.background="";80 }81document.getElementById(pptname).style.display = "block";82elmnt.style.backgroundColor = color;83 84 }85 // 触发 id="defaultppt" click 事件,第一张要显示出来86 document.getElementById("defaultppt").click();87 </script>88 </body>89 </html>
