bootstrap單選按鈕和摺疊只能部分工作

我想在我的引導網站中將單選按鈕組與摺疊功能一起使用。我想要有3個按鈕，並且在任何給定時間只有一個按鈕/ div處於活動狀態。我把它部分地工作，但不完全。bootstrap單選按鈕和摺疊只能部分工作

當我選擇第一個單選按鈕時，它會正確顯示第一個div。如果我移動到第二個div它也很棒。如果我回到也顯示的第一個div。但是，如果我移動到第三個按鈕它顯示第三個div，但是如果我然後返回到第一個按鈕第一個div不會再顯示。從那時起，我只能顯示div2和div3。

這就是我所做的。

我創建的單選按鈕組如下：

<div class="btn-group" data-toggle="buttons-radio"> 
<button class="btn btn-primary btn-large" onclick="showdiv(1);">Save as PDF</button> 
<button class="btn btn-primary btn-large" onclick="showdiv(2);">Simple API</button> 
<button class="btn btn-primary btn-large" onclick="showdiv(3);">Advanced API</button> 
</div>

然後創建如下3周的div：

<div id="div1" class="row pricing collapse"> 
    ..... 
</div> 
<div id="div2" class="row pricing collapse"> 
    ..... 
</div> 
<div id="div3" class="row pricing collapse"> 
    ..... 
</div>

我創建使其呈現給定的div是如下所述的javascript：

function showdivold(divnr) { 
    for (var i=1;i<=3;i++) 
    { 
    if (i==divnr) 
    { 
     $('#div'+i).collapse('show'); 
    } 
    else 
    { 
     $('#div'+i).collapse('hide'); 
    } 
    } 
}

任何幫助將不勝感激。我使用jquery1.8.3和bootstrap js。

另一個問題是，我似乎無法將第一個單選按鈕的默認狀態設置爲「按下」。

來源

2013-01-01 user1914292

任何[小提琴]（http://jsfiddle.net）將不勝感激。 –

這個怎麼樣？這是你在追求什麼？我使用了Bootstrap 2.3.1和JQuery 1.9.1。希望最新版本對你來說不是問題。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link href="../assets/css/bootstrap.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="btn-group nav nav-tabs" data-toggle="buttons-radio"> 
     <button class="btn btn-large" href="#div1" data-toggle="tab">Save as PDF</button> 
     <button class="btn btn-large" href="#div2" data-toggle="tab">Simple API</button> 
     <button class="btn btn-large" href="#div3" data-toggle="tab">Advanced API</button> 
    </div> 

    <div class="tab-content"> 
     <div id="div1" class="tab-pane active"> 
      <p>div #1</p> 
     </div> 
     <div id="div2" class="tab-pane"> 
      <p>div #2</p> 
     </div> 
     <div id="div3" class="tab-pane"> 
      <p>div #3</p> 
     </div> 
    </div> 
    <script src="../assets/js/jquery.js"></script> 
    <script src="../assets/js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2013-03-05 00:54:52 ideacreek

bootstrap單選按鈕和摺疊只能部分工作

回答

相關問題