Bootstrap tab Dynamic switching effect _javascript skills

Recently in writing a system of the first page, is the usual one on the top of the navigation bar, there are login and registration two buttons, click the button to eject the corresponding login or registration box, in order to facilitate interaction, the login and registration in a tab, each time users do not have to go back to the top to click, just click on the current box can switch, Take a look at it first, as shown in the picture:

With bootstrap in writing static pages, Just take the. Active class to give yourself the box you want to show first, and dynamic time is not simple in the JS code to give yourself the first show box directly set. Active, so that when the first switch is set to active has been in the interface, so we need to write JS code, to each Tab-pane Add Click event, each click on a tab-pane to the rest of the Tab-pane removed active, to the current click of the Tab-pane plus active. Words are not much said, the code is as follows:

Partial HTML code:

This is the HTML code for the top navigation bar:

<!--top navigation-->
<div class= "NavBar navbar-inverse navbar-fixed-top" role= "navigation" id= "Menu-nav" >
 <div class= "container" >
  <div class= "Navbar-header" >
   <a class= "Navbar-brand" href= "#" >XXXXX</a>
  </div>
  <div class= "Navbar-collapse collapse" >
   <ul class= "Nav Navbar-nav ">
    <li class=" active "><a href=" # "> Home </a></li>
    <li><a href=" # > Brief </a></li>
    <li><a href= "#" data-toggle= "modal" data-target= "#about-modal" > About </a></li>
   </ul>
   <ul class= "nav navbar-nav" style= "margin-left:700px;" >
    <li><a href= "#" onclick= "Showlogin ()" > Login </a></li>
    <li><a href= "#" Onclick= "Showregister ()" > Registration </a></li>
   </ul>
  </div>
 </div>
</div>

This is the HTML code for the tab :

<!--tab login and register--> <div id= "Login-register" > <ul class= "Nav nav-tabs" role= "Tablist" id= "Feature-tab" > <li id= "Li-login" onclick= "setloginactive ()" ><a href= "#tab-login" role= "tab" data-toggle= "tab" > Login </a ></li> <li id= "Li-register" onclick= "setregisteractive ()" ><a href= "#tab-register" role= "tab"
data-toggle= "tab" > Registration </a></li> <button onclick= "Closetab ()" id= "Btn-close" >X</button> </ul> <div class= "tab-content" > <br> <div class= "Tab-pane" id= "Tab-login" > <div class= " Row feature "> <br><br> <form class=" form-horizontal "role=" form "> <div class=" form-gr OUP "> <label for=" inputEmail3 "class=" col-sm-3 Control-label "> account number:</label> <div class=" col-sm-9 "> <input type=" email "class=" Form-control "id=" inputEmail3 "placeholder=" Please enter e-mail address/mobile number "> < /div> </div> <div class= "foRm-group "> <label for=" inputPassword3 "class=" col-sm-3 Control-label "> Password:</label> <div class=" 
     Col-sm-9 "> <input type=" password "class=" Form-control "id=" inputPassword3 "placeholder=" Please enter your account password > 
      </div> </div> <div class= "Form-group" > <div class= "col-sm-offset-6 col-sm-6" > <button type= "Submit" class= "btn btn-primary" > Login </button> </div> </div> </ form> </div> </div> <div class= "Tab-pane" id= "Tab-register" > <div class= "row feature"
    ; <br> <form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for= "I NputEmail3 "class=" col-sm-3 Control-label "> account:</label> <div class=" col-sm-9 "> <input type=" em
     Ail "class=" Form-control "id=" inputEmail3 "placeholder=" Please enter e-mail address/mobile number "> </div> </div> <div class= "FOrm-group "> <label for=" inputPassword3 "class=" col-sm-3 Control-label "> Password:</label> <div class= "Col-sm-9" > <input type= "password" class= "Form-control" id= "inputPassword3" placeholder= "Please enter your account password"
     ; </div> </div> <div class= "Form-group" > <label for= "inputPassword3" class= "col-sm-3 con Trol-label "> Password:</label> <div class=" col-sm-9 "> <input type=" password "class=" Form-control "id = "InputPassword3" placeholder= please again password, confirm correct "> </div> </div> <div class=" form-gr OUP "> <div class=" col-sm-offset-6 col-sm-6 "> <button type=" Submit "class=" BTN btn-primary "> Registration

 ;/button> </div> </div> </form> </div> </div> </div>

Next is important JS code :

 function Showlogin ()//click on the top navigation bar login button, let the tab appear first login {var login_id = document.getElementById ("Login-register");
   if (Login_id.style.display = = ' block ') Login_id.style.display = "None"; Setloginactive (); 

 tab appears login page login_id.style.display = ' block ';
   function Showregister ()//click on the top navigation bar registration button, let the tab appear first register {var register_id = document.getElementById ("Login-register");
   if (Register_id.style.display = = ' block ') Register_id.style.display = "None"; Setregisteractive (); 

 tab appears registration page register_id.style.display = ' block ';
  function setloginactive ()///Free toggle inside tab {var Div_lo = document.getElementById ("Tab-login");
  var Li_lo = document.getElementById ("Li-login");
  var div_re = document.getElementById ("Tab-register"); 
  var li_re = document.getElementById ("Li-register"); Div_re.classname = "";
  Removes the active of the registry box and removes all class Li_re.classname = "" of the Div; Div_re.classname = "Tab-pane";
  Can not remove the class, if removed can not switch div_lo.classname = "active";

 Li_lo.classname = "active";
}
 function setregisteractive () {var Div_lo = document.getElementById ("Tab-login");
  var Li_lo = document.getElementById ("Li-login");
  var div_re = document.getElementById ("Tab-register"); 
  var li_re = document.getElementById ("Li-register");
  Div_lo.classname = "";
  Li_lo.classname = "";
  Div_lo.classname = "Tab-pane";
  Div_re.classname = "active"; 
 Li_re.classname = "active"; 
  function Closetab ()//Close Tab {var tab = document.getElementById ("Login-register");
 Tab.style.display = "None";

 }

Summary: This article mainly describes in the use of bootstrap framework, active how dynamic application, and can not be as static page set once, but to use the corresponding JS code to do processing.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.