单个页面上有多个列表组，但每个列表组允许唯一的选择

Question

我想在我的页面上有三个单列列表组，并允许用户从每个组中选择一个项目。但是，列表组都是链接的，我无法弄清楚如何将它们保留为单独的列表组。

我在这里设置了一个快速Plunker 链接，以便您可以看到我正在尝试做什么。

我也不确定为什么列表的每一列都会被前一列偏移。

这是我在尝试弄清楚如何执行此操作时正在使用的 HTML：

<div class="container">
    <h3>
        Select one from each column.
    </h3>

    <div>
      <h3 class="list-group-item-heading">Select Opp</h3>
    </div>
    <div id="oppname" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Aelia
            </a>
      </div>
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Del Monte
            </a>
      </div>
    </div>

    <div>
      <h3 class="list-group-item-heading">Select Id</h3>
    </div>
    <div id="oppid" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Id: 1724
            </a>
        <div class="no-margin">
          <a href="#" class="list-group-item">
                Id: 1675
            </a>
        </div>
      </div>
    </div>

    <div>
      <h3 class="list-group-item-heading">Select Size</h3>
    </div>
    <div id="oppsize" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Size: 24
            </a>
        <div class="no-margin">
          <a href="#" class="list-group-item">
                Size: 75
            </a>
        </div>
      </div>
    </div>

</div>

谢谢你的帮助！

Answer 1

是的，奇怪的是它在默认分组下不起作用。

这是Fiddle中的解决方案

<div class="list-group">
  <a href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>

<div class="list-group">
  <a  href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>
<div class="list-group">
  <a  href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>

并添加这个同级 js 来进行这样的选择

$('body').on('click', '.list-group a', function (e) {
   $(this).addClass('active');
   $(this).siblings().removeClass('active');
});

和维奥拉。