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 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
微信小程序提交form操作示例
Dec 30 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php利用事务处理转账问题
2015/04/22 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
PyQt5实现简易计算器
2020/05/30 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python获取时间戳代码实例
2019/09/24 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
设计总监岗位职责
2013/12/07 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
重点工程汇报材料
2014/08/27 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers