2

我想在我的引导网站中使用单选按钮组和折叠功能。我希望在任何给定时间都有 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 和引导 js。

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

4

1 回答 1

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>
于 2013-03-05T00:54:52.130 回答