标签页的制作

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

想起之前学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>  ...（后面就是具体内容和闭合标签）

用bootstrap一定要引用他的css啊，然后前面加上了

  <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！