快捷導(dǎo)航

Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果

更新時(shí)間：2016年11月28日 10:45:46 作者：塞上江南果

這篇文章主要為大家詳細(xì)介紹了Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果，點(diǎn)擊登錄和注冊可以實(shí)現(xiàn)任意切換,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在寫一個(gè)系統(tǒng)的首頁，就是平常的一個(gè)頂部導(dǎo)航欄，上面有登錄和注冊兩個(gè)按鈕，點(diǎn)擊按鈕彈出相應(yīng)的登錄或注冊框，為了方便交互，把登錄和注冊在一個(gè)選項(xiàng)卡里放著，每次用戶不用回到頂部去點(diǎn)擊，只需要在當(dāng)前框點(diǎn)擊就可切換，先看一下樣子吧，如圖所示：

用Bootstrap平時(shí)在寫靜態(tài)頁面時(shí)，只需要把.active類給自己想要第一個(gè)展現(xiàn)的框就可以，而動(dòng)態(tài)的時(shí)候并不能簡單的在js代碼中給自己想要第一個(gè)展現(xiàn)的框直接設(shè)置.active，這樣當(dāng)切換時(shí)第一個(gè)設(shè)置為active的一直在界面中存在，所以我們需要寫js代碼，給每個(gè)Tab-pane添加點(diǎn)擊事件，每點(diǎn)擊一個(gè)Tab-pane都要給其余Tab-pane取除active，給當(dāng)前點(diǎn)擊的這個(gè)Tab-pane加上active。話不多說，代碼如下：

部分html代碼：

這是頂部導(dǎo)航欄的Html代碼：

<!-- 頂部導(dǎo)航 -->
<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="#">首頁</a></li>
    <li><a href="#">簡述</a></li>
    <li><a href="#" data-toggle="modal" data-target="#about-modal">關(guān)于</a></li>
   </ul>
   <ul class="nav navbar-nav" style="margin-left:700px;">
    <li><a href="#" onClick="showLogin()">登錄</a></li>
    <li><a href="#" onClick="showRegister()">注冊</a></li>
   </ul>
  </div>
 </div>
</div>

這是選項(xiàng)卡的html代碼：

<!--選項(xiàng)卡登錄和注冊-->
<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">登錄</a></li>
  <li id="li-register" onClick="setRegisterActive()"><a href="#tab-register" role="tab" data-toggle="tab">注冊</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-group">
     <label for="inputEmail3" class="col-sm-3 control-label">帳號:</label>
     <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail3" 
       placeholder="請輸入電子郵箱地址/手機(jī)號">
     </div>
     </div>
     <div class="form-group">
     <label for="inputPassword3" class="col-sm-3 control-label">密碼:</label>
     <div class="col-sm-9">
      <input type="password" class="form-control" id="inputPassword3"
        placeholder="請輸入您的帳號密碼">
     </div>
     </div>
     <div class="form-group">
     <div class="col-sm-offset-6 col-sm-6">
      <button type="submit" class="btn btn-primary">登錄</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="inputEmail3" class="col-sm-3 control-label">帳號:</label>
     <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail3" 
       placeholder="請輸入電子郵箱地址/手機(jī)號">
     </div>
     </div>
     <div class="form-group">
     <label for="inputPassword3" class="col-sm-3 control-label">密碼:</label>
     <div class="col-sm-9">
      <input type="password" class="form-control" id="inputPassword3"
        placeholder="請輸入您的帳號密碼">
     </div>
     </div>
     <div class="form-group">
     <label for="inputPassword3" class="col-sm-3 control-label">密碼:</label>
     <div class="col-sm-9">
      <input type="password" class="form-control" id="inputPassword3"
        placeholder="請?jiān)佥斠淮蚊艽a，確認(rèn)是否正確">
     </div>
     </div>
     <div class="form-group">
     <div class="col-sm-offset-6 col-sm-6">
      <button type="submit" class="btn btn-primary">注冊</button>
     </div>
     </div>
    </form>
   </div>
  </div>
</div>

接下來是重要的js代碼：

 function showLogin() //點(diǎn)擊頂部導(dǎo)航欄登錄按鈕，讓選項(xiàng)卡先出現(xiàn)登錄
 {
   var login_id = document.getElementById("login-register");
   if (login_id.style.display == 'block')
    login_id.style.display = "none";
   setLoginActive(); //選項(xiàng)卡出現(xiàn)登錄頁面
   login_id.style.display = 'block'; 

 }

 function showRegister() //點(diǎn)擊頂部導(dǎo)航欄注冊按鈕，讓選項(xiàng)卡先出現(xiàn)注冊
 {
   var register_id = document.getElementById("login-register");
   if (register_id.style.display == 'block')
    register_id.style.display = "none";
   setRegisterActive(); 選項(xiàng)卡出現(xiàn)注冊頁面
   register_id.style.display = 'block'; 

 }

 function setLoginActive() //在選項(xiàng)卡內(nèi)部自由切換
 {
  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 = ""; //移除注冊框的active，同時(shí)移除了該div的所有類
  li_re.className = "";
  div_re.className = "tab-pane"; //不能去掉該類，如果去掉則不能切換
  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() //關(guān)閉選項(xiàng)卡
 {
  var tab = document.getElementById("login-register"); 
  tab.style.display = "none";
 }

總結(jié)：此篇主要說明在用bootstrap框架時(shí)，active如何動(dòng)態(tài)應(yīng)用，并不能像靜態(tài)頁面一樣設(shè)置一次就可以，而要用相應(yīng)的js代碼來做處理。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: