标签页的制作

五一放假前接到任务，要帮师兄一个已经成型的网页作一个标签页（就是点到某个标签，就显示出相应的内容）。

想起之前学bootstrap的时候学过做标签页，于是想重用。代码大概是这样的：

<ul class="nav nav-tabs" role="tablist" id="tab-list">
<li class="active"><a href="#tab-wuxi" role="tab" data-toggle="tab">无锡</a></li>
<li><a href="#tab-suzhou" role="tab" data-toggle="tab">苏州</a></li>
<li><a href="#tab-wuzhen" role="tab" data-toggle="tab">乌镇</a></li>
<li><a href="#tab-zhouzhuang" role="tab" data-toggle="tab">周庄</a></li>
<li><a href="#tab-hangzhou" role="tab" data-toggle="tab">杭州</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-wuxi">
<div class="row feature">
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/wuxi.jpg">
</div>
<div class="col-md-7">
<h2 class="feature-heading">无锡</h2>
<p class="feature-passage">无锡，简称“锡”，古称梁溪、金匮，被誉为“太湖明珠”。无锡市位于长江三角洲平原腹地，江苏南部，太湖流域的交通中枢，京杭大运河从中穿过。[1] 无锡北倚长江，南濒太湖，东接苏州，西连常州，构成苏锡常都市圈。</p>
</div>
</div>
</div>
...（后面就是具体内容和闭合标签）

<link rel="stylesheet" href="css/bootstrap.min.css">

在我觉得这样就可以了的时候 ，它却没有显示出正确的结果。在我之前写的代码里明明是好的呀！

又检查一遍代码也没觉得有问题，我觉得给我很大干扰的是，师兄的js代码放在body前面，让我忘了还有bootstrap.js，还有jquery，害我又重头改了一遍他的html！（不过话说他不是搞这个的，代码写的好乱，我自己来一遍也是对的。嘘，不要告诉他！）

<script src="tmp/js/jquery.js"></script>
<script src="tmp/js/bootstrap.min.js"></script> 

总结一下，标签页利用bootstrap内置的tab类来实现还是很简单的。

首先是一个列表，用来展示标签页的标签部分。

代码在上面，重点是每个li的链接的href都是每个tab的id，一定要注意这里。其他的role和data-toggle就按照他给的写，告诉bootstrap这是一个标签就好。

然后用一个  <div class="tab-content"> 包裹，里面写每一个标签的内容。

每一个标签的id都要和标签列表中href的内容对应，这样才能关联到标签和内容。最后完成的效果是这样的：

到此就完成了标签页的制作！

一定别忘了引入js！

最后

以上就是和谐小白菜为你收集整理的标签页的制作的全部内容，希望文章能够帮你解决标签页的制作所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。