<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="tab-vertical clearfix"> <ul class="nav nav-left col-sm-2"> <li class="active"><a href="#tab1" data-toggle="tab">超商代碼</a></li> <li><a href="#tab2" data-toggle="tab">WEB ATM付款</a></li> <li><a href="#tab3" data-toggle="tab">信用卡付款</a></li> <li><a href="#tab4" data-toggle="tab">實體ATM付款</a></li> <li><a href="#tab5" data-toggle="tab">超商條碼繳費</a></li> </ul> <section class="tab-content col-sm-10"> <article class="tab-pane active" id="tab1"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapseOne"> 超商代碼 </div> <div id="collapseOne" class="panel-collapse collapse in"> jjjjjjjj </div> </div> </article> <article class="tab-pane" id="tab2"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapseTwo"> WEB ATM付款 </div> <div id="collapseTwo" class="panel-collapse collapse"> 22 </div> </div> </article> <article class="tab-pane" id="tab3"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapseThree"> 信用卡付款 </div> <div id="collapseThree" class="panel-collapse collapse"> 333 </div> </div> </article> <article class="tab-pane" id="tab4"> <div class="panel panel-default" > <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapseFour"> 實體ATM付款 </div> <div id="collapseFour" class="panel-collapse collapse"> 444 </div> </div> </article> <article class="tab-pane" id="tab5"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapseFive"> 超商條碼繳費 </div> <div id="collapseFive" class="panel-collapse collapse"> 444 </div> </div> </article> </section> </div> ////////////////////////////////// <div class="tab-vertical clearfix"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab6" data-toggle="tab">超商代碼</a></li> <li><a href="#tab7" data-toggle="tab">WEB ATM付款</a></li> <li><a href="#tab8" data-toggle="tab">信用卡付款</a></li> <li><a href="#tab9" data-toggle="tab">實體ATM付款</a></li> <li><a href="#tab10" data-toggle="tab">超商條碼繳費</a></li> </ul> <section class="tab-content"> <article class="tab-pane active" id="tab6"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapstab6"> 超商代碼 </div> <div id="collapstab6" class="panel-collapse collapse in"> jjjjjjjj </div> </div> </article> <article class="tab-pane" id="tab7"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapstab7"> WEB ATM付款 </div> <div id="collapstab7" class="panel-collapse collapse"> 22 </div> </div> </article> <article class="tab-pane" id="tab8"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapstab8"> 信用卡付款 </div> <div id="collapstab8" class="panel-collapse collapse"> 333 </div> </div> </article> <article class="tab-pane" id="tab9"> <div class="panel panel-default" > <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapstab9"> 實體ATM付款 </div> <div id="collapstab9" class="panel-collapse collapse"> 444 </div> </div> </article> <article class="tab-pane" id="tab10"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent=".tab-pane" href="#collapstab10"> 超商條碼繳費 </div> <div id="collapstab10" class="panel-collapse collapse"> 444 </div> </div> </article> </section> </div>

body{padding: 10px;background: #000;} .tab-vertical .panel-heading {cursor: pointer;} .tab-vertical a:focus{border:0 !important } .tab-vertical{border: 1px solid #d4d4d1;background: #fff;} @media (min-width: 768px) { /*針對選單改變設計*/ .tab-vertical>.nav-left>li{border-bottom: 1px solid #d4d4d1;} .tab-vertical>.nav-left>li>a{color:#333;} .tab-vertical>.nav-left>li.active{background: #ffa10d;margin-right:-2px;} .tab-vertical>.nav-left>li.active>a{color:#fff;} .tab-vertical>.nav-left>li > a:hover,.tab-vertical>.nav-left>li>a:focus {color:#fff;background-color:#ffa10d;} /*當網頁版本時*/ .tab-vertical .panel-heading {display: none;} .tab-vertical .panel {border: none;box-shadow: none;} .tab-vertical .panel-collapse {height: auto;} .tab-vertical .panel-collapse.collapse {display: block;} /*針對區塊線框處理*/ .tab-vertical>.nav-left[class*="col-"],.tab-vertical section[class*="col-"]{padding: 0;margin: 0;} .tab-vertical>section[class*="col-"]{border-left: 1px solid #d4d4d1;padding:10px;min-height: 300px;} } @media (max-width: 767px) { .tab-vertical{border:0;background:transparent;} .tab-vertical .tab-content .tab-pane {display: block;} .tab-vertical .nav-left, .tab-vertical .nav-tabs{display: none;} .tab-vertical .panel {margin: 0;box-shadow: none;border-radius: 0;margin-top: -2px; } .tab-vertical .tab-pane:first-child .panel {border-radius: 5px 5px 0 0;} .tab-vertical .tab-pane:last-child .panel {border-radius: 0 0 5px 5px;} }