章节
问答
笔记
评论
占位
占位

选项卡--选项卡的结构

一个选项卡主要包括两个部分,其一是菜单项,其二是内容面板。拿下面的示例来做演示。其HTML结构如下:

<!-- 选项卡组件(菜单项nav-tabs)-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">规则</a></li>
    <li><a href="#forum" role="tab">论坛</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" 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>

关键一点,选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

在Bootstrap框架中选项卡nav-tabs已带有样式,前面在介绍导航一节中有详细介绍。而对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的:

/*bootstrap.css文件第3758行~第3763行*/
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

运行效果见最右侧结果窗口:

但这个Tabs没有任何交互功能,点击选项卡不会进行内容的切换。不过不用急,接下来的内容将告诉你如何实现内容与选项卡之间的切换。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?