Bootstrap选项卡动态切换效果


Posted in Javascript onNovember 28, 2016

最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示:

Bootstrap选项卡动态切换效果

用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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
javascript的BOM
May 03 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 #Javascript
Bootstrap实现导航栏的2种方式
Nov 28 #Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 #Javascript
Bootstrap框架实现广告轮播效果
Nov 28 #Javascript
ReactJs快速入门教程(精华版)
Nov 28 #Javascript
js窗口震动小程序分享
Nov 28 #Javascript
JS获取年月日时分秒的方法分析
Nov 28 #Javascript
You might like
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php操作access数据库的方法详解
2017/02/22 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python中特殊函数集锦
2015/07/27 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
酒店员工培训方案
2014/06/02 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
军训阅兵新闻稿
2015/07/17 职场文书