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单选按钮和折叠只能部分工作

回答

相关问题