Bootstrap中的动态按钮组

Question

我想知道是否有办法使按钮组动态化，例如： http ： //www.bootply.com/lkJQ2WDubH ，你可以看到第一行和第二行。

我如何创建或使其动态化，以便当我点击按钮时它调整位置并获得活动状态？

当按钮1处于活动状态时：

当按钮2处于活动状态时：

等等...

因此，一个按钮组或工具栏就像这两个组一样，现在它是重复的代码。

想法是活跃的按钮脱颖而出，但现在它是重复的代码，也许有更多的动态解决方案，欣赏指导或帮助。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary active">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
</div>
<br>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="First groups">
     <button type="button" class="btn btn-primary active">2</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">

    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
</div>

谢谢。

Answer 1

做这样的事情：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group" role="group" aria-label="First group">
      <button type="button" class="btn btn-primary new">1</button>
      <button type="button" class="btn btn-primary new">2</button>
      <button type="button" class="btn btn-primary new">3</button>
      <button type="button" class="btn btn-primary new">4</button>
      <button type="button" class="btn btn-primary new">5</button>
      <button type="button" class="btn btn-primary new">6</button>
      <button type="button" class="btn btn-primary new">7</button>
  </div>
</div>

然后，通过一点点jquery，您可以向单击的按钮添加一个类，并将其从其他按钮中删除，以实现您在单击按钮上所需的任何样式：

  $("button.new").click(function() {
      $("button.new").removeClass("buttonChange").removeClass("buttonRoundLeft").removeClass("buttonRoundRight");
     $(this).addClass("buttonChange");
     $(this).prev().addClass("buttonRoundLeft");
     $(this).next().addClass("buttonRoundRight");
 });

所需的CSS类如下所示：

.buttonChange  {
    margin: 0 10px !important;
    border-radius: 5px !important;
 }

 .buttonRoundLeft {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
 }
 .buttonRoundRight {
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
 }

查看CODEPEN的工作示例

更新：

更简单的方法是只为按钮的焦点状态设置一个类，如下所示：

button.new:focus {
   margin: 0 10px !important;
   border-radius: 5px !important;
}

这仅适用于您不希望相邻按钮具有圆角的情况。 使用相同的语法对下一个按钮很容易，但前一个按钮不可能。

Answer 2

 $("li.btn").click(function() { $("li.btn").removeClass("buttonSelect"); $(this).addClass("buttonSelect"); }); 

 .buttonSelect { margin: 0 10px !important; } li.btn:focus { margin: 0 10px !important; border-radius: 0 !important; } 

 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <ul class="btn-group" role="group" aria-label="First group"> <li type="button" class="btn btn-primary">1</li> <li type="button" class="btn btn-primary">2</li> <li type="button" class="btn btn-primary">3</li> <li type="button" class="btn btn-primary">4</li> <li type="button" class="btn btn-primary">5</li> <li type="button" class="btn btn-primary">6</li> <li type="button" class="btn btn-primary">7</li> </ul> </div> 

检查一下