零基础建站培训介绍

当前位置:

如何自己制作TAB选项卡

在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中都有使用。

tab

下面学做网站论坛就来介绍一下如何自己制作TAB选项卡,这个方法是基于bootstrap框架。方法如下:

第一步:引入bootstrap的css与JS。在</head>标签上方,添加以下的引入代码。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

第二步:做出选项卡按钮

<ul class="nav nav-tabs">
<li><a href="#">历史</a></li>
<li><a href="#">语文</a></li>
<li><a href="#">数学</a></li>
</ul>

第三步:制作主体内容

<div class="tab-content">
<div class="tab-pane">历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史</div>
<div class="tab-pane">语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文</div>
<div class="tab-pane">数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学</div>
</div>

第四步:给主体内容每一项添加一个ID,并且给第一项添加显示内容类 active

<div class="tab-content">
<div class="tab-pane active" id="pane1">历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史</div>
<div class="tab-pane" id="pane2">语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文</div>
<div class="tab-pane" id="pane3">数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学</div>
</div>

第五步:选项卡按钮添加各自内容的链接地址,产生关联。

<ul class="nav nav-tabs">
<li><a href="#pane1">历史</a></li>
<li><a href="#pane2">语文</a></li>
<li><a href="#pane3">数学</a></li>
</ul>

第六步:给选项卡按钮添加点击隐藏的类

<ul class="nav nav-tabs">
<li><a href="#pane1" data-toggle="tab">历史</a></li>
<li><a href="#pane2" data-toggle="tab">语文</a></li>
<li><a href="#pane3" data-toggle="tab">数学</a></li>
</ul>

通过以上六步,即可制作出一个tab选项卡,可以完美应用到网站制作上。全部代码如下:

<ul class="nav nav-tabs">
<li><a href="#pane1" data-toggle="tab">历史</a></li>
<li><a href="#pane2" data-toggle="tab">语文</a></li>
<li><a href="#pane3" data-toggle="tab">数学</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane1">历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史</div>
<div class="tab-pane" id="pane2">语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文</div>
<div class="tab-pane" id="pane3">数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学</div>
</div>
上一课: 下一课:

发表评论