JS Simple to achieve the tab switching effect of the multi-window display function _javascript skills

This article describes the JS simple implementation of the tab switching effect of the multi-window display function. Share to everyone for your reference, specific as follows:

<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" > Department news </a></span> <span id= "newstab2" onmouseover= "Settab" (' Newstab ', 2,3 "> <a href=" ### "target=" _blank "> Media reports </a></span> <span id=" newstab3 "onmouseover=" Settab (' Newstab ', 3,3] "> <a href=" ### "target=" _blank "> Academic research </a></span> </div> <div class=" Contentbox "> <div id=" con_newstab_1 "> <ul> <li><span>2015-09-09</span>& Lt;a href= "###" target= "_blank" > read who asked you to chant water Fall fragrance Float 1</a></li> <li><span>2015-08-17</span> <a href= "###" target= "_blank" > read who asked you to chant the water Fall fragrance floating 1</a></li> <li><span>2015-08-05</span&gt
    <a href= "###" target= "_blank" > read who asked you to chant water Fall fragrance float 1</a></li> </ul> </div><div id= "con_newstab_2" style= "Display:none;" > <ul> <li><span>2015-09-09</span><a href= "###" target= "_blank" > Reading who asked you to chant water Fall fragrance Float 2 </a></li> <li><span>2015-08-17</span><a href= "###" target= "_blank" > read who asked you to chant the water fall fragrance floating 2</a></li> <li><span>2015-08-05</span><a href= "###" target= "_blank" > read who asked you to recite the scent of water Floating 2</a></li> </ul> </div> <div id= "Con_newstab_3" style= "Display:none;" > <ul> <li><span>2015-09-09</span><a href= "###" target= "_blank" > Reading who asked you to chant water Fall fragrance Float 3 </a></li> <li><span>2015-08-17</span><a href= "###" target= "_blank" > read who asked you to chant the water fall fragrance floating 3</a></li> <li><span>2015-08-05</span><a href= "###" target= "_blank" > read who asked you to recite the scent of water float 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>

Effect Chart:

More readers interested in JavaScript-related content can view the site topics: "JavaScript traversal algorithm and tips summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary" and "JavaScript Mathematical Computing Usage Summary"

I hope this article will help you with JavaScript programming.