bootstrap--實現滑動門的切換

<ul class="nav nav-tabs">
  <li><a href="#p1" data-toggle="tab">十元套餐</a></li>
  <li class="active"><a href="#p2" data-toggle="tab">二十元套餐</a></li>
  <li><a href="#p3" data-toggle="tab">三十元套餐</a></li>
</ul>
<div class="tab-content">
  <div class="fade tab-pane" id="p1">十元套餐  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio enim labore officiis vitae. Ab adipisci,
    assumenda deleniti dolorem dolores ea eligendi inventore ipsa itaque nesciunt, nulla officia ut veniam voluptas?</div>
  <div class="fade in tab-pane active" id="p2">二十元套餐  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio enim labore officiis vitae. Ab adipisci,
    assumenda deleniti dolorem dolores ea eligendi inventore ipsa itaque nesciunt, nulla officia ut veniam voluptas?</div>
  <div class="fade tab-pane " id="p3">三十元套餐  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio enim labore officiis vitae. Ab adipisci,
    assumenda deleniti dolorem dolores ea eligendi inventore ipsa itaque nesciunt, nulla officia ut veniam voluptas?</div>
</div>

　　主要CSS解釋

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}