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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python引用DLL文件的方法
2015/05/11 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
基于python指定包的安装路径方法
2018/10/27 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
促销活动总结
2014/04/28 职场文书
征兵宣传标语
2014/06/20 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
地道战观后感
2015/06/04 职场文书
品德与社会教学反思
2016/02/24 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
MySQL分布式恢复进阶
2022/07/23 MySQL