blocks|key|7180|text|单击btn-group+doesn't+set+a+(active)+class中的按钮。该按钮获得不同的背景颜色，因为它是聚焦的(：焦点)。单击不同btn组中的按钮会将焦点设置到此按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7181|使用类似下面的代码为每个btn组设置一个活动类：|7182|$('.btn-group+button').click(function()
{
++++$(this).parent().children().removeClass('active');
++++$(this).addClass('active');
});|code-block|syntax|javascript|7183|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Click the button in the btn-group doesn't set a (active) class. The button gets a different background-color cause it is focussed (:focus). Clicking a button in a different btn-group sets the focus to this button.</p>

<p>Use something like this to set an active class per btn-group:</p>

<pre><code>$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});
</code></pre>


blocks|key|223832|text|如果你使用的是AngularJS，Angular+UI+bootstrap有一个很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|223833|基本上可以使用btnRadio指令执行以下操作。|223834|<div+class="btn-group">
++++<label+class="btn+btn-primary"+ng-model="radioModel"+btn-radio="'Left'">Left</label>
++++<label+class="btn+btn-primary"+ng-model="radioModel"+btn-radio="'Middle'">Middle</label>
++++<label+class="btn+btn-primary"+ng-model="radioModel"+btn-radio="'Right'">Right</label>
</div>|code-block|syntax|javascript|223835|entityMap|0|LINK|mutability|MUTABLE|url|http://angular-ui.github.io/bootstrap/#/buttons^0|H|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>If you are using AngularJS the <a href="http://angular-ui.github.io/bootstrap/#/buttons" rel="nofollow">Angular UI bootstrap</a> has a great solution.</p>

<p>Basically do the following using the btnRadio directive.</p>

<pre><code>&lt;div class="btn-group"&gt;
    &lt;label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'"&gt;Left&lt;/label&gt;
    &lt;label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'"&gt;Middle&lt;/label&gt;
    &lt;label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'"&gt;Right&lt;/label&gt;
&lt;/div&gt;
</code></pre>


blocks|key|7302|text|为了简化它，以便下一位查看的人，这里有Bootstrap网站上的解决方案代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7303|<div+class="btn-group"+data-toggle="buttons">
++<label+class="btn+btn-primary+active">
++++<input+type="radio"+name="options"+id="option1"+autocomplete="off"+checked>+Radio+1+(preselected)
++</label>
++<label+class="btn+btn-primary">
++++<input+type="radio"+name="options"+id="option2"+autocomplete="off">+Radio+2
++</label>
++<label+class="btn+btn-primary">
++++<input+type="radio"+name="options"+id="option3"+autocomplete="off">+Radio+3
++</label>
</div>|code-block|syntax|javascript|7304|基本上，您将标签样式设置为按钮，并将选项编码为常规单选按钮，以将一组选项与另一组选项分开。|7305|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Just to simplify it for the next person to come looking, here's the solution code from the Bootstrap website:</p>

<pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
  &lt;label class="btn btn-primary active"&gt;
    &lt;input type="radio" name="options" id="option1" autocomplete="off" checked&gt; Radio 1 (preselected)
  &lt;/label&gt;
  &lt;label class="btn btn-primary"&gt;
    &lt;input type="radio" name="options" id="option2" autocomplete="off"&gt; Radio 2
  &lt;/label&gt;
  &lt;label class="btn btn-primary"&gt;
    &lt;input type="radio" name="options" id="option3" autocomplete="off"&gt; Radio 3
  &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>Basically, you style the labels as buttons and code the options as regular radio buttons to separate one set of options from the other. </p>


<p>**Bootstrap 3</p>

<p>I'm trying to make each set of button group unique but the different groups are interfering with each other</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;Payment Mode&lt;/label&gt;
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;Cash / Cheque / Bank Transfer &lt;/button&gt;
  &lt;button type="button" class="btn btn-default"&gt;JobsBuddy Disbursement&lt;/button&gt;
&lt;/div&gt;

&lt;label&gt;Payment Period&lt;/label&gt;
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;Immediate&lt;/button&gt;
  &lt;button type="button" class="btn btn-default"&gt; More Than 1 day&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How do i keep it unique in it's own group</p>


Bootstrap 3 Button Groups

**自举3我试图使每一组按钮组都是唯一的，但不同的组相互干扰​<label>Payment Mode</label><div class="btn-group">  <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer <...

问Bootstrap 3按钮组
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3按钮组EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3按钮组
EN