最近在寫一個系統的首頁,就是平常的一個頂部導航欄,上面有登錄和注冊兩個按鈕,點擊按鈕彈出相應的登錄或注冊框,為了方便交互,把登錄和注冊在一個選項卡裡放著,每次用戶不用回到頂部去點擊,只需要在當前框點擊就可切換,先看一下樣子吧,如圖所示:
用Bootstrap平時在寫靜態頁面時,只需要把.active類給自己想要第一個展現的框就可以,而動態的時候並不能簡單的在js代碼中給自己想要第一個展現的框直接設置.active,這樣當切換時第一個設置為active的一直在界面中存在,所以我們需要寫js代碼,給每個Tab-pane添加點擊事件,每點擊一個Tab-pane都要給其余Tab-pane取除active,給當前點擊的這個Tab-pane加上active。話不多說,代碼如下:
部分html代碼:
這是頂部導航欄的Html代碼:
<!-- 頂部導航 --> <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">關於</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>
這是選項卡的html代碼:
<!--選項卡登錄和注冊--> <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="請輸入電子郵箱地址/手機號"> </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="請輸入電子郵箱地址/手機號"> </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="請再輸一次密碼,確認是否正確"> </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() //點擊頂部導航欄登錄按鈕,讓選項卡先出現登錄 { var login_id = document.getElementById("login-register"); if (login_id.style.display == 'block') login_id.style.display = "none"; setLoginActive(); //選項卡出現登錄頁面 login_id.style.display = 'block'; } function showRegister() //點擊頂部導航欄注冊按鈕,讓選項卡先出現注冊 { var register_id = document.getElementById("login-register"); if (register_id.style.display == 'block') register_id.style.display = "none"; setRegisterActive(); 選項卡出現注冊頁面 register_id.style.display = 'block'; } function setLoginActive() //在選項卡內部自由切換 { 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,同時移除了該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() //關閉選項卡 { var tab = document.getElementById("login-register"); tab.style.display = "none"; }
總結:此篇主要說明在用bootstrap框架時,active如何動態應用,並不能像靜態頁面一樣設置一次就可以,而要用相應的js代碼來做處理。
如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。