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>
扫一扫
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
