Bootstrap 选项卡


@{Layout = null;
}<!DOCTYPE html><html>
<head><meta charset="utf-8" /><!--设置字符集utf-8编码--><meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示--><title>ChapterThreeTabs--第三章 选项卡</title><link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body><div class="container"><div class="h4 text-center">--------------------------选项卡组件----------------------------- </div><!--选项卡--选项卡的结构--><!--一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。其HTML结构如下:关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。在Bootstrap框架中选项卡nav-tabs已带有样式，前面在介绍导航一节中有详细介绍。而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的.--><!-- 选项卡组件（菜单项nav-tabs）--><ul id="myTab" 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="myTabContent" class="tab-content"><div class="tab-pane active" id="bulletin">公告内容面板</div><div class="tab-pane" id="rule">规则内容面板</div><div class="tab-pane" id="forum">论坛内容面板</div><div class="tab-pane" id="security">安全内容面板</div><div class="tab-pane" id="welfare">公益内容面板</div></div><div class="h4 text-center">-------------------------- 选项卡--为选择卡添加fade样式----------------------------- </div><!-- 选项卡组件（菜单项nav-tabs）--><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#bulletin1" data-toggle="tab">公告</a></li><li><a href="#rule1" data-toggle="tab">规则</a></li><li><a href="#forum1" data-toggle="tab">论坛</a></li><li><a href="#security1" data-toggle="tab">安全</a></li><li><a href="#welfare1" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content"><div class="tab-pane active fade in" 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><div class="h4 text-center">-------------------------- 选项卡--胶囊式选项卡（nav-pills）----------------------------- </div><!--在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。--><!-- 选项卡组件（菜单项nav-tabs）--><ul id="myTab" class="nav nav-pills"><li class="active"><a href="#bulletin2" data-toggle="pill">公告</a></li><li><a href="#rule2" data-toggle="pill">规则</a></li><li><a href="#forum2" data-toggle="pill">论坛</a></li><li><a href="#security2" data-toggle="pill">安全</a></li><li><a href="#welfare2" data-toggle="pill">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content"><div class="tab-pane active fade in" id="bulletin2">公告内容面板</div><div class="tab-pane fade" id="rule2">规则内容面板</div><div class="tab-pane fade" id="forum2">论坛内容面板</div><div class="tab-pane fade" id="security2">安全内容面板</div><div class="tab-pane fade" id="welfare2">公益内容面板</div></div><div class="h4 text-center">-------------------------- 选项卡--JavaScript触发方法----------------------------- </div><!--除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。调用方法:在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用：$(function(){$("#myTab a").click(function(e){e.preventDefault();$(this).tab("show");});})--><!-- 选项卡组件（菜单项nav-tabs）--><ul id="myTab1" class="nav nav-tabs"><li class="active"><a href="#bulletin3">公告</a></li><li><a href="#rule3">规则</a></li><li><a href="#forum3">论坛</a></li><li><a href="#security3">安全</a></li><li><a href="#welfare3">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent1" class="tab-content"><div class="tab-pane active fade in" id="bulletin3">公告内容面板</div><div class="tab-pane fade" id="rule3">规则内容面板</div><div class="tab-pane fade" id="forum3">论坛内容面板</div><div class="tab-pane fade" id="security3">安全内容面板</div><div class="tab-pane fade" id="welfare3">公益内容面板</div></div></div><script src="~/Content/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script><script src="~/Content/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script type="text/javascript">$(function () {$("#myTab1 a").click(function (e) {e.preventDefault();$(this).tab("show");});})</script>
</body>
</html>

Bootstrap 选项卡相关推荐

Bootstrap选项卡
前面的话选项卡Tabs是Web中一种非常常用的功能.用户点击对菜单项,能切换出对应的内容.本文将详细介绍Bootstrap选项卡基本用法 Bootstrap框架中的选项卡主要有两部分内容组成: 1 ...
bootstrap 选项卡_使Bootstrap选项卡与砌体一起玩
bootstrap 选项卡 Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Includ ...
使Bootstrap选项卡与砌体一起发挥作用
Bootstrap是最广泛采用的开源前端框架之一. 将Bootstrap包含在您的项目中,您将能够立即生成响应式网页. 如果您尝试将Masonry与Bootstrap Tabs小部件(Bootstra ...
选项卡 bootstrap_使Bootstrap选项卡与砌体一起发挥作用
选项卡 bootstrap Bootstrap是最广泛采用的开源前端框架之一. 将Bootstrap包含在您的项目中,您将能够立即生成响应式网页. 如果您尝试将Masonry与Bootstrap Ta ...
学习使用Bootstrap选项卡功能
学习使用Bootstrap选项卡功能前言基本用法胶囊式选项卡 JS触发事件订阅 JS源码前言选项卡Tabs是Web中一种非常常用的功能.用户点击对菜单项,能切换出对应的内容.本文将详细介绍 ...
Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'><h2 class='page-header'>Bootstrap 选项卡</h2><! ...
html选项卡如何美化,Bootstrap超酷Tabs选项卡美化特效
这是一款基于Bootstrap的超酷Tabs选项卡美化特效.该Tabs选项卡在原生Bootstrap选项卡的基础上,使用CSS3样式来对齐进行美化,效果非常炫酷. 使用方法在页面中引入bootstr ...
分享106个JS选项卡，总有一款适合您
分享106个JS选项卡,总有一款适合您 106个JS选项卡下载链接:https://pan.baidu.com/s/1kdRJvTgcuZe_TpzrcnmQDQ?pwd=0k2d 提取码:0k2d ...
移动端python开发_python前端之移动端库、框架及自动化和优化
目的:学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件移动端的操作方式和 ...

Bootstrap 选项卡

Bootstrap 选项卡相关推荐

最新文章

热门文章