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 相关文章推荐
向左滚动文字 js代码效果
Aug 17 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
javascript canvas实现雨滴效果
Jun 09 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实现文件安全下载
2006/10/09 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python def 定义函数,调用函数方式
2020/06/02 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
加拿大最大的书店:Indigo
2017/01/01 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
计算机相关专业自荐信
2014/07/02 职场文书
找工作求职信
2014/07/07 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
商铺租房协议书范本
2014/12/04 职场文书
个人年终总结怎么写
2015/03/09 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书