data-toggle="tab"——指明标签项具有切换响应功能；
.tab-content——包裹标签页的所有内容部分；
.tab-pane——包裹对应标签项的内容部分；
.fade——设置标签项切换时有淡入淡出的效果；
.in——设置标签页第一项淡入的初始化效果；
.active——设置标签页以及对应标签项的内容处于激活状态；
更多细节参考示例：
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>饭盒儿——发现身边不一样的世界</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <ul class="nav nav-tabs" role="tablist" id="myTab"> <li role="presentation" class="active"><a href="#home" data-toggle="tab">首页</a></li> <li role="presentation"><a href="#about" data-toggle="tab">关于我们</a></li> <li role="presentation" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 新闻资讯 <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#inner" data-toggle="tab" role="menuitem" tabindex="-1">集团要闻</a></li> <li role="presentation"><a href="#outer" data-toggle="tab" role="menuitem" tabindex="-1">行业动态</a></li> </ul> </li> </ul> <div id="MyTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <h2>欢迎来到饭盒儿的世界</h2> <p> 拥抱气味相投的有趣之人；订阅一个灵魂共振的星球；捕捉那些砰然心动的瞬间；我们只邂逅可爱的陌生人。 </p> </div> <div class="tab-pane fade" id="about"> <h2>关于我们</h2> <p> 那朵叫青春的云，曾经飘过我们的天空，淋湿了我们的心情，却和岁月一起馈赠给我们两个字——成长。只在此刻，与时光许下诺言，相期，莫违。 </p> </div> <div class="tab-pane fade" id="inner"> <h2>集团要闻</h2> <p> 我知道我不是一个很好的记录者，但我比任何人都喜欢回首自己来时的路，我不但的回首，伫足，然手时光仍下我轰轰烈烈的向前奔去。 </p> </div> <div class="tab-pane fade" id="outer"> <h2>行业动态</h2> <p> 我想有一天，我和一个人足够契合，我们可以一整天听着音乐，吃着好吃的，天南地北地聊着，哪怕两两相望静静坐着也不会尴尬不会无聊。友情也好，爱情也好。 </p> </div> </div> </div> <script> $('#myTab li:eq(1) a').tab('show'); // $('a[data-toggle="tab"]').on("shown.bs.tab",function(e){ // alert("切换了"); // }); </script> </body> </html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-25 07:38:06