选项卡--为选择卡添加fade样式，玩转Bootstrap（JS插件篇）教程-慕课网

选项卡--为选择卡添加fade样式

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

任务

我来试试：为右侧选项卡添加fade样式

?不会了怎么办

index.html
style.css

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>声明式触发选项卡（添加fade样式）</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> <body>  <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li> <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul>  <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> <div class="tab-pane fade" id="forum">论坛内容面板</div> <div class="tab-pane fade" id="security">安全内容面板</div> <div class="tab-pane fade" id="welfare">公益内容面板</div> </div> <br /> <br />   <ul id="myTab2" class="nav nav-tabs" role="tablist"> <li><a href="#fun" role="tab" data-toggle="tab">娱乐</a></li> <li><a href="#house" role="tab" data-toggle="tab">房产</a></li> <li><a href="#internal" role="tab" data-toggle="tab">国内</a></li> <li><a href="#external" role="tab" data-toggle="tab">国外</a></li> </ul>  <div id="myTabContent2" class="tab-content"> <div class="tab-pane active" id="fun">娱乐内容面板</div> <div class="tab-pane" id="house">房产内容面板</div> <div class="tab-pane" id="internal">国内内容面板</div> <div class="tab-pane" id="external">国外内容面板</div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

body{padding:10px;}

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

3-4 选项卡--为选择卡添加fade样式