Bootstrap基础--选项卡
Bootstrap基础–选项卡(nav-tabs)选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。注意： 选项卡中链接的锚点要与对应的面板内容容器的
·
Bootstrap基础–选项卡(nav-tabs)
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。
一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。
注意： 选项卡中链接的锚点要与对应的面板内容容器的?相匹配。
触发切换效果
- 选项卡导航链接中要设置data-toggle=“tab”;
- 并且设置data-target=“对应内容面板的选择符(一般是?)”；
如果是链接 的话，还可以通过href=“对应内容面板的选择符(一般是?)”。主要起的作用是用户点击的时候能找到该选择符所对应的面板内容tab-pane。 - 面板内容统一放在ta-content容器中，而且每个内容面板tab-pane都需要设置一个独立的选择符（最好是ID）与选项卡中的data-target 或 href 的值匹配。
添加fade样式
在面板中添加类名fade，可让其产生渐入的效果。在添加fade样式时，最初的默认显示的内容面板一定要记得加上in类名，不然其内容用户无法看到。
胶囊式选项卡（nav-pill）
- 将nav-tabs换成nav-pills.
- 将data-toggle="tab"换成data-toggle=“pill”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="JSmin/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css" />
</head>
<body>
<h1>选项卡</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#bulletin" data-toggle="tab">公告</a></li>
<li><a href="#rule" data-toggle="tab">规则</a></li>
<li><a href="#forum" data-toggle="tab">论坛</a></li>
<li><a href="#security" data-toggle="tab">安全</a></li>
<li><a href="#welfare" data-toggle="tab">公益</a></li>
</ul>
<div id="mytab-content" 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>
<h3>js触发选项卡</h3>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#bulletin1">公告</a></li>
<li><a href="#rule1">规则</a></li>
<li><a href="#forum1">论坛</a></li>
<li><a href="#security1">安全</a></li>
<li><a href="#welfare1">公益</a></li>
</ul>
<div id="mytab-content2" class="tab-content">
<div class="tab-pane fade in active" id="bulletin1">公告内容面板</div>
<div class="tab-pane fade" id="rule1">规则内容面板</div>
<div class="tab-pane fade" id="forum1">论坛内容面板</div>
<div class="tab-pane fade" id="security1">安全内容面板</div>
<div class="tab-pane fade" id="welfare1">公益内容面板</div>
</div>
<script type="text/javascript">
$(function(){
$('#myTab a').click(function(){
$(this).tab('show')
})
})
</script>
</body>
</html>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)