bootstrap多個可切換標籤內容的

對不起，如果這看起來是一個愚蠢的問題，但從我的代碼，你應該能夠看到，我試圖做到這一點，因爲一旦你點擊「教育」選項卡出現選項卡窗格元素。我知道它現在正在出現，因爲它正在找到第一個並在那裏停留，但是每次我嘗試並放置自己的腳本時，它都不起作用。bootstrap多個可切換標籤內容的

我不能設法將代碼粘貼到的格式都瘋狂了（縮進）提供的盒子，但在這裏不用..

<body data-spy="scroll" data-target="#myTab"> 
<div class="container" style="background:#404040;> 
    <div class="row"> 
     <div class="col-md-12" style="background:#707070;"> 
      <div class="btn-group btn-group-justified"> 
       <ul class="nav" id="myTab"> 
        <li><a href="#commercial" data-toggle="tab">Commercial</a></li> 
        <li><a href="#residential" data-toggle="tab">Residential</a></li> 
        <li><a href="#educational" data-toggle="tab">Educational</a></li> 
       </ul> 
      </div> 
     <div class="col-md-9" style="background:#101010; height:1000px; margin-bottom:10px;"> 
      <div class="tab-content"> 
       <div class="tab-pane fade" id="educational"> 
        this should be hidden 
       </div> 
      </div> 
     </div> 
      <div class="col-md-3"> 
       <div id="fixednav"> 
        <div class="tab-content"> 
         <div class="tab-pane fade active in" id="commercial"> 
          <ul class="nav"> 
           <li class="active" ><a href="#house">MAYTIME INN, BURFORD</a></li> 
            <li><a href="#house1">CIRENCESTER BUSINESS PARK</a></li> 
            <li><a href="#house2">SHOTTERY BROOK BUSINESS PARK</a></li> 
            <li><a href="#house2">SPRINGFIELD BUSINESS PARK</a></li> 
            <li><a href="#house2">RANELAGH TERRACE</a></li> 
            <li><a href="#house2">TESCO EXPRESS MEASHAM</a></li> 
            <li><a href="#house2">PRIMROSE HOSPICE</a></li> 
          </ul> 
         </div> 
          <div class="tab-pane fade" id="residential"> 
           <ul class="nav"> 
            <li class="active" ><a href="#house">PENDEEN ROAD</a></li> 
             <li><a href="#house2">LILLINGTON ROAD, LEAMINGTON SPA</a></li> 
             <li><a href="#house2">BROADWAY COTTAGES, CHALGROVE</a></li> 
             <li><a href="#house2">CLARENDON PLACE, LEAMINGTON SPA</a></li> 
             <li><a href="#house2">MILL HOLLOW, DORRIDGE</a></li> 
             <li><a href="#house2">THE CRICKETERS, DORRIDGE</a></li> 
             <li><a href="#house2">HARVINGTON COURT</a></li> 
           </ul> 
          </div> 
           <div class="tab-pane fade" id="educational"> 
            <ul class="nav"> 
             <li class="active" ><a href="#house">NEWBOTTLE AND CHARLTON C of E PRIMARY SCHOOL</a></li> 
             <li><a href="#house2">ILMINGTON C of E PRIMARY SCHOOL</a></li> 
             <li><a href="#house2">ALDRIDGE SCHOOL</a></li> 
            </ul> 
           </div> 
        </div> 
       </div> 
      </div> 
     </div> 
</div>

來源

2014-05-13 user3240903

只能一次上使用一個id一個頁面，你使用id =「educational」兩次，這就是爲什麼它不起作用。你爲什麼不把它分成這樣的大標籤呢？

<div class="row"> 
    <div class="col-md-12" style="background:#707070;"> 
     <div class="btn-group btn-group-justified"> 
      <ul class="nav" id="myTab"> 
       <li><a href="#commercial" data-toggle="tab">Commercial</a></li> 
       <li><a href="#residential" data-toggle="tab">Residential</a></li> 
       <li><a href="#educational" data-toggle="tab">Educational</a></li> 
      </ul> 
     </div> 
     <div class="tab-content"> 
      <div class="col-md-3 col-md-offset-9 tab-pane fade active in" id="commercial"> 
       <div id="fixednav"> 
        <ul class="nav"> 
         <li class="active"><a href="#house">MAYTIME INN, BURFORD</a></li> 
         <li><a href="#house1">CIRENCESTER BUSINESS PARK</a></li> 
         <li><a href="#house2">SHOTTERY BROOK BUSINESS PARK</a></li> 
         <li><a href="#house2">SPRINGFIELD BUSINESS PARK</a></li> 
         <li><a href="#house2">RANELAGH TERRACE</a></li> 
         <li><a href="#house2">TESCO EXPRESS MEASHAM</a></li> 
         <li><a href="#house2">PRIMROSE HOSPICE</a></li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-md-3 col-md-offset-9 tab-pane fade" id="residential"> 
       <ul class="nav"> 
        <li class="active"><a href="#house">PENDEEN ROAD</a></li> 
        <li><a href="#house2">LILLINGTON ROAD, LEAMINGTON SPA</a></li> 
        <li><a href="#house2">BROADWAY COTTAGES, CHALGROVE</a></li> 
        <li><a href="#house2">CLARENDON PLACE, LEAMINGTON SPA</a></li> 
        <li><a href="#house2">MILL HOLLOW, DORRIDGE</a></li> 
        <li><a href="#house2">THE CRICKETERS, DORRIDGE</a></li> 
        <li><a href="#house2">HARVINGTON COURT</a></li> 
       </ul> 
      </div> 
      <div class="tab-pane fade" id="educational"> 
       <div class="col-md-9" style="background:#101010; height:1000px; margin-bottom:10px;"> 
        this should be hidden 
       </div> 
       <div class="col-md-3"> 
        <ul class="nav"> 
         <li class="active"><a href="#house">NEWBOTTLE AND CHARLTON C of E PRIMARY SCHOOL</a></li> 
         <li><a href="#house2">ILMINGTON C of E PRIMARY SCHOOL</a></li> 
         <li><a href="#house2">ALDRIDGE SCHOOL</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Click here for an example

來源

2014-05-14 03:07:17 joshhunt

+1今天這個幫我...是@joshhunt你是正確的，我們必須給不同的ID對所有組選項卡及其工作謝謝.. –

bootstrap多個可切換標籤內容的

回答

相關問題