Question

我想在我的引导网站中使用单选按钮组和折叠功能。我希望在任何给定时间都有3个按钮和一个按钮/ div激活。我让它部分工作，但不完全。

当我选择第一个单选按钮时，它会正确显示第一个div。如果我移动到第二个div它也很有效。如果我回到也显示的第一个div。但是接下来 - 如果我移动到第3个按钮它会显示第3个div，但如果我再回到第1个按钮，则第1个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>

然后我创建了三个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。

另一个问题是我似乎无法将第一个单选按钮的默认状态设置为“已按下”。

Answer 1

这个怎么样？这就是你追求的吗？我使用了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>

bootstrap单选按钮和折叠仅部分工作

1 个答案: