相思资源网 Design By www.200059.com
最近在写一个系统的首页，就是平常的一个顶部导航栏，上面有登录和注册两个按钮，点击按钮弹出相应的登录或注册框，为了方便交互，把登录和注册在一个选项卡里放着，每次用户不用回到顶部去点击，只需要在当前框点击就可切换，先看一下样子吧，如图所示：
用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插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
Bootstrap,选项卡
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Bootstrap选项卡动态切换效果的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。