本文展示了一个使用HTML、CSS及Bootstrap实现的简单Tab导航栏示例。该示例包括三个Tab选项：报刊、微博和微信，点击选项可以切换不同的内容面板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<ul id="mytab" class="nav nav-tabs">
<li class="active"><a href="#news" data-toggle="tab">报刊</a></li>
<li><a href="#weibo" data-toggle="tab">微博</a></li>
<li><a href="#weixin" data-toggle="tab">微信</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="news">111</div>
<div class="tab-pane" id="weibo">2222</div>
<div class="tab-pane" id="weixin">333</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<ul id="mytab" class="nav nav-tabs">
<li class="active"><a href="#news" data-toggle="tab">报刊</a></li>
<li><a href="#weibo" data-toggle="tab">微博</a></li>
<li><a href="#weixin" data-toggle="tab">微信</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="news">111</div>
<div class="tab-pane" id="weibo">2222</div>
<div class="tab-pane" id="weixin">333</div>
</div>
</body>
</html>
扫一扫
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
