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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
详解php中的implements 使用
2017/06/13 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python2随机数列生成器简单实例
2017/09/04 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
标准自荐信范文
2014/01/29 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
辞职信格式模板
2015/02/27 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android