Bootstrap 4：如何通过 jquery 或 vuejs 单击列表组项目时使其处于活动状态？答案

【问题标题】：Bootstrap 4 : How to make the item of list-group active when clicking it via jquery or vuejs?Bootstrap 4：如何通过 jquery 或 vuejs 单击列表组项目时使其处于活动状态？
【发布时间】：2016-09-21 22:53:41
【问题描述】：

Bootstrap 4 : 如何在通过 jquery 或 vuejs 点击时使列表组的项目处于活动状态？

这是组件：

<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做到这一点？提前致谢！

【问题讨论】：

标签： javascript jquery twitter-bootstrap vue.js

【解决方案1】：

例如：

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

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

【讨论】：

【解决方案2】：

给你的 list-group div 一个 id 并使用$('#name .list-group-item active') 选择它们的活动列表组项。

【讨论】：

哦，不。这是一种“jquery”的做事方式。您不需要使用 VueJS 等动态数据绑定库来执行此操作。在 jquery 世界中，您倾向于（或有时必须）查看 DOM 以存储数据、读取状态（如活动）。最好换个思路，将数据绑定到 DOM，这样当数据发生变化时，DOM 会自动更新。你在 VueJS 中需要的一切都在那里，阅读手册的问题，但你正在寻找的部分在这里：vuejs.org/guide/class-and-style.html

【解决方案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');
});

菜单的特定类

我会添加“mainNav”类，这样我就可以定位它。以防万一我在同一页面上有两个“列表组”

<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');
});

【讨论】：

【解决方案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>

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

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

【讨论】：