Javascript 引导单选按钮和折叠仅部分起作用_Javascript_Twitter Bootstrap

Javascript 引导单选按钮和折叠仅部分起作用

javascript twitter-bootstrap

Javascript 引导单选按钮和折叠仅部分起作用,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我想使用单选按钮组和折叠功能一起在我的引导网站。我想有3个按钮，在任何给定的时间只有一个按钮/div处于活动状态。我让它部分工作，但不是完全工作当我选择第一个单选按钮时，它会正确显示第一个div。如果我转到第二组，效果也很好。如果我移回同样显示的第一个div。但是，如果我移动到第三个按钮，它将显示第三个div，但是如果我返回到第一个按钮，第一个div将不再显示。从那时起，我只能展示div2和div3 这就是我所做的我创建了单选按钮组，如下所示： <div class="btn-grou

我想使用单选按钮组和折叠功能一起在我的引导网站。我想有3个按钮，在任何给定的时间只有一个按钮/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>

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


另存为PDF
简单API
高级API

然后我创建了三个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如下所示：

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

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

函数showdivold（divnr）{
对于（var i=1；i这个怎么样？这就是您想要的吗？我使用了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>


另存为PDF
简单API
高级API
第1分部
第2分部
第3分部
。