本文實例講述了JS簡單實現tab切換效果的多窗口顯示功能。分享給大家供大家參考,具體如下:
<div style=" text-align:center; margin-top:40px;"> <div class="menubox"> <span id="newstab1" class="hover" onmouseover="setTab('newstab',1,3)"> <a href="###" target="_blank">科室新聞</a></span> <span id="newstab2" onmouseover="setTab('newstab',2,3)"> <a href="###" target="_blank">媒體報道</a></span> <span id="newstab3" onmouseover="setTab('newstab',3,3)"> <a href="###" target="_blank">學術研究</a></span> </div> <div class="contentbox"> <div id="con_newstab_1"> <ul> <li><span>2015-09-09</span><a href="###" target="_blank">閱誰問君誦水落清香浮1</a></li> <li><span>2015-08-17</span><a href="###" target="_blank">閱誰問君誦水落清香浮1</a></li> <li><span>2015-08-05</span><a href="###" target="_blank">閱誰問君誦水落清香浮1</a></li> </ul> </div> <div id="con_newstab_2" style="display:none;"> <ul> <li><span>2015-09-09</span><a href="###" target="_blank">閱誰問君誦水落清香浮2</a></li> <li><span>2015-08-17</span><a href="###" target="_blank">閱誰問君誦水落清香浮2</a></li> <li><span>2015-08-05</span><a href="###" target="_blank">閱誰問君誦水落清香浮2</a></li> </ul> </div> <div id="con_newstab_3" style="display:none;"> <ul> <li><span>2015-09-09</span><a href="###" target="_blank">閱誰問君誦水落清香浮3</a></li> <li><span>2015-08-17</span><a href="###" target="_blank">閱誰問君誦水落清香浮3</a></li> <li><span>2015-08-05</span><a href="###" target="_blank">閱誰問君誦水落清香浮3</a></li> </ul> </div> </div> </div> <script type="text/javascript"> function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } </script>
效果圖:
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript遍歷算法與技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。