Bootstrap 4：如何通过jquery或vuejs使列表组的项目在点击时激活？

Question

这是组件：

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

http://v4-alpha.getbootstrap.com/components/list-group/#linked-items

第一个项目是激活的，但是点击另一个不会激活它，如何通过jquery或vuejs实现？提前致谢！

Answer 1

例如：

$('.list-group-item').click(function(e) {
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
});

JSFiddle：https://jsfiddle.net/mg0xa1ku/

Answer 2

为您的列表组 div 提供一个 ID，并 select 他们使用 $('#name .list-group-item active') 的活动列表组项目。

Answer 3

$('.list-group > a').click(function(e){
  // find/remove all active classes from each a
  $('.list-group > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
});

特定 class 菜单

我会添加 'mainNav' class 这样我就可以定位它。以防万一我在同一页上有两个 'list-group'

<div class="list-group mainNav">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>


$('.mainNav > a').click(function(e){
  // find/remove all active classes from each a
  $('.mainNav > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
});

Answer 4

<script>
// es6 js
new Vue({
  el: '#listGroup',
  data {
    selected: 0
  }, 
  methods: {
    isSelected (i) {
      return i === this.selected
    }
  }
})
</script>

<div class="list-group" id='listGroup'>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(0) }" v-on:click="selected = 0">Cras justo odio</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(1) }"  v-on:click="selected = 1">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(2) }"  v-on:click="selected = 2">Morbi leo risus</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(3) }"  v-on:click="selected = 3">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item" v-bind:class="{ 'active' : isSelected(4) }"  v-on:click="selected = 4">Vestibulum at eros</a>
</div>

这定义了一个属性的选择。单击列表项时，v-on 挂钩会将 selected 的值更改为 v-on 属性表达式中的整数 id。随着 this.selected 的值在 vue 中发生变化，类发生变化，因为它们绑定了方法 isSelected() 的输出，该方法在选定值发生变化时被调用。

http://codepen.io/tremendusapps/pen/bebGGj

Bootstrap 4：如何通过jquery或vuejs使列表组的项目在点击时激活？

Bootstrap 4 : How to make the item of list-group active when clicking it via jquery or vuejs?

javascript

jquery

twitter-bootstrap

vue.js