This article describes the multi-window display function of JS simply implementing tab switching effect. Share it for your reference, as follows:
<div style="text-align:center; margin-top:40px;"> <div> <span id="newstab1" onmouseover="setTab('newstab',1,3)"> <a href="###" target="_blank">Department News</a></span> <span id="newstab2" onmouseover="setTab('newstab',2,3)"> <a href="###" target="_blank">Media Report</a></span> <span id="newstab3" onmouseover="setTab('newstab',3,3)"> <a href="###" target="_blank">Academic Research</a></span> </div> <div> <div id="con_newstab_1"> <ul> <li><span>2015-09-09</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 1</a></li> <li><span>2015-08-17</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 1</a></li> <li><span>2015-08-05</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 1</a></li> </ul> </div> <div id="con_newstab_2" style="display:none;"> <ul> <li><span>2015-09-09</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 2</a></li> <li><span>2015-08-17</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 2</a></li> </div> <div id="con_newstab_3" style="display:none;"> <ul> <li><span>2015-09-09</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 3</a></li> <li><span>2015-08-17</span><a href="###" target="_blank">Who asked you to recite the water falling fragrance floating 3</a></li> </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>Reproduction image:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Traversal Algorithm and Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data Structures and Algorithm Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article will be helpful to everyone's JavaScript programming.