2

ブートストラップされたWebサイトで、折りたたみ機能と一緒にラジオボタングループを使用したいと思います。常に3つのボタンと1つのボタン/divのみをアクティブにしたい。部分的には機能しましたが、完全には機能しませんでした。

最初のラジオボタンを選択すると、最初のdivが正しく表示されます。2番目のdivに移動すると、それもうまく機能します。1番目の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>

次に、次のように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とブートストラップjsを使用しています。

もう1つの問題は、最初のラジオボタンのデフォルト状態を「押された」に設定できないように見えることです。

4

1 に答える 1

1

これはどう？これはあなたが求めているものですか？Bootstrap2.3.1とJQuery1.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 に答える