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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

(0)

相关推荐

  • BootStrap tab选项卡使用小结

    选项卡 选项卡的基本使用方式为: <ul class="nav nav-tabs"> <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#" data-target=&q

  • bootstrap导航、选项卡实现代码

    本文实例为大家分享了bootstrap导航和选项卡的具体代码,供大家参考,具体内容如下 导航: <!-- nav 导航的基础样式 --> <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li><a href="#">雪碧图</a></li> &

  • Bootstrap选项卡与Masonry插件的完美结合

    Bootstrap 是最流行的前端框架之一.在你的项目中使用Bootstrap,你就可以很快的实现响应式的网页. 如果你尝试将Masonry和Bootstrap提供的众多JavaScript组件之一的 选项卡组件 一起使用,你将会发现许多讨厌的行为. 我遇到过,而本文主要关注这个问题是什么和你要如何来解决这个问题. Bootstrap的Tabs Bootstrap的选项卡组件包括两个关键点:选项卡导航元素和一些内容面板.在页面加载时,第一个面板应用了 .active 类.使这个面板默认是可见的.

  • bootstrap选项卡使用方法解析

    选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示. <!-- 选项卡组件(菜单项nav-tabs)--> <ul id="myTab" class="nav nav-tabs" role=

  • bootstrap选项卡扩展功能详解

    用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写. 花了几个小时把tabs控件扩展了下.下面是代码 页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> &l

  • 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)

    今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观. 先看图例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

  • 使用Bootstrap Tabs选项卡Ajax加载数据实现

    本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &

  • 浅谈bootstrap源码分析之tab(选项卡)

    实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hideen.bs.tab:隐藏上一个元素完成 1.4.

  • 很棒的Bootstrap选项卡切换效果

    今天学习了Bootstrap的选项卡,在这里分享一下,具体解释代码中都有,不再重复了. 先看一下效果图吧,显目一些! 实现代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scal

  • 全面解析Bootstrap中tab(选项卡)的使用方法

    本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件   1.1.Hiden.bs.tab:隐藏上一个元素   1.2.Show.bs.tab:显示当前元素   1.3.Hidee

随机推荐