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;
}