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

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM