JavaScript imitation netease tab making code _javascript tips

If your page has only one tab (tab) To switch places, you need to call the JS effect, if the separate for it, but also for the page to load a jquery plugin, it must be extremely painful. All too often, jquery effects are not omnipotent, occasionally to a native JS effect is also necessary. Today, idle boring, with JS and jquery wrote a tab effect, but the use of jquery is only for better access to tags and modify the style.

Let's take a look at the effect chart first ~

One, JavaScript implementation
1. HTML Layout

<div id= "box" > <div class= "Biaoti" > <span id= "Span_xinwen" onmouseover= "Xianshixinwen ()" class= "S1" &G t; news </span> <span id= "Span_tupian" onmouseover= "Xianshitupian ()" class= "S2" > Pictures </span> <span id= 
  "Span_junshi" onmouseover= "Xianshijunshi ()" class= "S3" > Military </span> </div> <div class= "Neirong" > <div class= "Info" id= "Xinwen" > <ul> <li><a href= "#" > News News News News News News </a></l I> <li><a href= "#" > News News News News news </a></li> <li><a href= "#" > News News News News News News news </a></li> <li><a href= "I" > News News News News News Press News news </a></li> <l I><a href= "#" > News News News News news </a></li> <li><a href= "#" > News News News News News News News news </a></li> <li><a href= "I" > News News News News Press News Press news </a></li> & Lt;li><a href= "#" > News News News NewsNews </a></li> <li><a href= "#" > News, News, news, news, news </a></li> </ul> & lt;/div> <div class= "info" id= "Tupian" > <ul> <li><a href= "#" > Picture pictures picture pictures picture pictures & Lt;/a></li> <li><a href= "#" > Picture pictures picture picture picture picture picture pictures </a></li> <li><a href = "# #" > Picture picture pictures pictures picture picture picture pictures photo photos </a></li> <li><a href= "# #" > Picture picture picture image picture Photo </a> </li> <li><a href= "#" > Picture picture picture picture picture picture photo Photo </a></li> <li><a href= "#" &G 
    t; picture pictures picture picture picture picture picture picture pictures </a></li> <li><a href= "#" > Picture picture pictures picture Picture picture pictures </a></li> <li><a href= "# #" > Picture picture picture pictures picture picture picture picture picture photo </a></li> <li><a href= "#" > Picture picture pictures picture picture picture picture </a></li> </ul> </div> <div class= "info" id= "Junshi" > <ul > <li><a href= "#" > Military militaryMilitary, military, military, military, military </a></li> <li><a href=, "#" > Military Military military military military military military </a></li> <l I><a href= "#" > Military Military Military military military military </a></li> <li><a href= "#" > Military, military, military, military, military, military </a></li> <li><a href=, "# #" > Military, Military, military, military, military and military. </a></li> & Lt;li><a href= "#" > Military Military Military military military military </a></li> <li><a href= "#" > Military, military, military, military, military, military </a></li> <li><a href=, "# #" > Military, Military, military, military, military and military. </a></li> & Lt;li><a href= "#" > Military Military military military military military military </a></li> </ul> </div> </div>  ;/div>

The layout is very simple, in fact, is two Div, the first div to store the button, the second div to store content.

2, CSS Decoration

<style type= "Text/css" > #box {height:600px; 
  margin-top:100px; 
 margin-left:100px; 
  #box. biaoti{font:16px/30px "song Body"; 
  height:30px; 
  width:310px; 
  border-top:2px solid #206F96; 
 Text-align:center; 
  #box. Biaoti. s1{width:102px; 
  height:29px; 
  border-left:1px solid #CFCFCF; 
  border-right:1px solid #CFCFCF; 
 Float:left; 
  #box. Biaoti. s2{width:102px; 
  height:29px; 
  border-right:1px solid #CFCFCF; 
  border-bottom:1px solid #CFCFCF; 
  Background:url (images/1.jpg) repeat-x; 
 Float:left; 
  #box. Biaoti. s3{width:102px; 
  height:29px; 
  border-right:1px solid #CFCFCF; 
  border-bottom:1px solid #CFCFCF; 
  Background:url (images/1.jpg) repeat-x; 
 Float:left; 
  #box. Neirong ul{List-style:none; 
 padding-left:0px; 
  #box. Neirong ul li{line-height:30px; 
 padding-left:0px; 
  #box. Neirong ul Li A:link, #box. Neirong ul Li a:visited{text-decoration:none; Color: #666; 
 font-size:16px; 
 } #tupian, #junshi {display:none; 

 } </style>

3, JS effect implementation

<script type= "Text/javascript" > Function Xianshitupian () {//Let picture contents appear document.getElementById ("Tupian"). sty 
  le.display= "Block"; 
  Let the content of the news hide document.getElementById ("Xinwen"). style.display= "None"; 
  Let the content of the military hide document.getElementById ("Junshi"). style.display= "None"; 
  Leave the background of the picture hidden document.getElementById ("Span_tupian"). style.background= "None"; 
  Let the news background plus picture document.getElementById ("Span_xinwen"). style.background= "url (images/1.jpg) repeat-x"; 
  Let the military background plus picture document.getElementById ("Span_junshi"). style.background= "url (images/1.jpg) repeat-x"; 
  Let the underline of the picture hide document.getElementById ("Span_tupian"). style.borderbottom= "None"; 
  Let the news underline add document.getElementById ("Span_xinwen"). style.borderbottom= "1px solid #CFCFCF"; 
 Let the military underline add document.getElementById ("Span_junshi"). style.borderbottom= "1px solid #CFCFCF"; 
  function Xianshijunshi () {//Let military content show up document.getElementById ("Junshi"). style.display= "Block"; Let the content of the news hide Document.getelemeNtbyid ("Xinwen"). style.display= "None"; 
  Keep the contents of the picture hidden document.getElementById ("Tupian"). style.display= "None"; 
  Let the military background hide document.getElementById ("Span_junshi"). style.background= "None"; 
  Let the news background plus picture document.getElementById ("Span_xinwen"). style.background= "url (images/1.jpg) repeat-x"; 
  Let the picture background with the picture document.getElementById ("Span_tupian"). style.background= "url (images/1.jpg) repeat-x"; 
  Let the underline of the military hide document.getElementById ("Span_junshi"). style.borderbottom= "None"; 
  Let the news underline add document.getElementById ("Span_xinwen"). style.borderbottom= "1px solid #CFCFCF"; 
 Let the picture underline plus document.getElementById ("Span_tupian"). style.borderbottom= "1px solid #CFCFCF"; 
  function Xianshixinwen () {//Let news content appear document.getElementById ("Xinwen"). style.display= "Block"; 
  Keep the contents of the picture hidden document.getElementById ("Tupian"). style.display= "None"; 
  Let the content of the military hide document.getElementById ("Junshi"). style.display= "None"; Let the news background hide document.getElementById ("Span_xinwen"). Style.bacKground= "None"; 
  Let the picture background with the picture document.getElementById ("Span_tupian"). style.background= "url (images/1.jpg) repeat-x"; 
  Let the military background plus picture document.getElementById ("Span_junshi"). style.background= "url (images/1.jpg) repeat-x"; 
  Let the underline of the news hide document.getElementById ("Span_xinwen"). style.borderbottom= "None"; 
  Make the underline of the picture plus document.getElementById ("Span_tupian"). style.borderbottom= "1px solid #CFCFCF"; 
 Let the military underline plus document.getElementById ("Span_junshi"). style.borderbottom= "1px solid #CFCFCF"; 
 } </script>

JS is actually very simple to write, the most important purpose is to modify the style and make animation.

Second, jquery implementation
1. HTML Layout

<div class= "box" > <div class= "title" > <button class= "btn btn-news" > News </button> <but Ton class= "Btn btn-pic" > Pictures </button> <button class= "btn btn-aff" > Military </button> </div> &L T;div class= "Contents" > <div class= "info" id= "News" > <ul> <li><a href= "#" > News News News News News News news </a></li> <li><a href= "#" > News News News News and News, news, news </a></li> &LT;LI&G T;<a href= "#" > News News News Press news </a></li> <li><a href= "#" > News News News News Press News News News </a& Gt;</li> <li><a href= "#" > News, News, news, news </a></li> <li><a href= "#" , News News News News News News News news </a></li> <li><a href= "#" > News News News News Press News News News </a></li> & Lt;li><a href= "#" > News News News Press news </a></li> <li><a href= "#" > News News News News </a></li> &LT;li><a href= "#" > News News News News News and news </a></li> </ul> </div> <div class= "inf O "id=" Pictures "> <ul> <li><a href=" # "> Picture picture picture image picture </a></li> <l I><a href= "#" > Pictures picture pictures picture picture picture pictures photo picture photo </a></li> <li><a href= "#" > Picture picture picture picture photo /a></li> <li><a href= "#" > Picture pictures picture pictures picture picture picture picture pictures </a></li> <li><a href= "#" 
     > Picture picture pictures picture picture photo </a></li> <li><a href= "#" > Picture picture picture image Image picture Photo </a></li> <li><a href= "#" > Picture picture pictures picture Picture picture picture image picture Picture picture photo </a></li> <li><a href= "#" > Picture picture picture pictures picture Picture picture picture Film </a></li> <li><a href= "#" > Picture picture pictures picture picture picture photo </a></li> <li><a HRE f= "#" > Picture picture picture pictures picture picture picture photo picture photo </a></li> </ul> </div> <div class= "info" id= "Affairs" &G 
    T <ul>; Li><a href= "#" > Military Military military military military military militarily military military </a></li> <li><a href= "#" > Military military, military militarily military military military military </a></li> <li><a href= "#" > Military-military military military military military military military </a></li> <li><a href = "#" > Military Military military military military Army military military military </a></li> <li><a href= "#" > Military military, military militarily military military military military </a></li > <li><a href= "#" > Military military military militarily military military military military military </a></li> <li><a href= "#" > Military Military Military Army Military military military </a></li> <li><a href= "#" > Military Military military military military military military </a></li> <li>& Lt;a href=, "#" > Military Military military military military military militarily military </a></li> <li><a href= "#" > Military military military militarily military military military </a> 

 </li> </ul> </div> </div> </div>

2, CSS adornments

body{margin:0px; 
padding:0px; 
} li{List-style:none; 
} a{Text-decoration:none; 
} button{Border:none; 
} input,button,select,textarea{Outline:none; 
 }. box{height:600px; 
 margin-top:100px; 
margin-left:100px; 
 }. title{font:16px/30px "song Body"; 
 height:30px; 
 width:306px; 
border-top:2px solid #206F96; 
 }. title. btn{width:102px; 
 height:29px; 
font-size:16px; 
 border-left:1px solid #CFCFCF of title. btn-news{; 
 border-right:1px solid #CFCFCF; 
 Float:left; 
Background: #fff; 
 border-right:1px solid #CFCFCF of title. btn-pic{; 
 border-bottom:1px solid #CFCFCF; Background:url (.. 
 /images/1.jpg) Repeat-x; 
Float:left; 
 border-right:1px solid #CFCFCF of title. btn-aff{; 
 border-bottom:1px solid #CFCFCF; Background:url (.. 
 /images/1.jpg) Repeat-x; 
Float:left; 
}. Contents ul{padding-left:10px; 
}. Contents ul li+li{line-height:29px; 
Contents ul li a{color: #666; }. Contents UL li:hover,.contents ul li: Visited,.contents ul li A:hover,. Contents ul li a:visited{color: #68a3ff; 
} #pictures, #affairs {display:none; 
 }

3, JS implementation

/** * Created by LXQ on 2016/10/3. 
  */$ (document). Ready (function () {$ (". Title. Btn-pic"). Click (function () {$ (#pictures). CSS ({"Display": "Block"}); 
  $ ("#news"). CSS ({"Display": "None"}); 
 
  $ ("#affairs"). CSS ({"Display": "None"}); 
  $ (". Btn-pic"). CSS ({"Border-bottom": "None", "Background-image": "None"}); 
  $ (". Btn-news"). CSS ({"Border-bottom": "1px solid #CFCFCF", "background-image": "url (images/1.jpg)"}); 
 $ (". Btn-aff"). CSS ({"Border-bottom": "1px solid #CFCFCF", "background-image": "url (images/1.jpg)"}); 
 
 }); 
  $ (". Title. Btn-aff"). Click (function () {$ ("#affairs"). CSS ({"Display": "Block"}); 
  $ ("#news"). CSS ({"Display": "None"}); 
 
  $ ("#pictures"). CSS ({"Display": "None"}); 
  $ (". Btn-aff"). CSS ({"Border-bottom": "None", "Background-image": "None"}); 
  $ (". Btn-pic"). CSS ({"Border-bottom": "1px solid #CFCFCF", "background-image": "url (images/1.jpg)"}); 
 $ (". Btn-news"). CSS ({"Border-bottom": "1px solid #CFCFCF", "background-image": "url (images/1.jpg)"}); 
 });
 $ (". Title. Btn-news"). Click (function () {$ ("#news"). CSS ({"Display": "Block"}); 
  $ ("#affairs"). CSS ({"Display": "None"}); 
 
  $ ("#pictures"). CSS ({"Display": "None"}); 
  $ (". Btn-news"). CSS ({"Border-bottom": "None", "Background-image": "None"}); 
  $ (". Btn-pic"). CSS ({"Border-bottom": "1px solid #CFCFCF", "background-image": "url (images/1.jpg)"}); 
 $ (". Btn-aff"). CSS ({"Border-bottom": "1px solid #CFCFCF", "background-image": "url (images/1.jpg)"}); 
}); 
 });

The biggest advantage of using jquery is that it's convenient to get a label, directly from the $ and class name or ID name.

The above is the entire content of this article, I hope to help you, I hope you will continue to pay attention to the latest content of the cloud-dwelling community.