本文實例講述了JS簡單實現tab切換效果的多窗口顯示功能。分享給大家供大家參考，具體如下：
<div style=" text-align:center; margin-top:40px;"> <div> <span id="newstab1" 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> <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程序設計有所幫助。