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

Posted 2023-02-22

【中文标题】Bootstrap 4：如何通过 jquery 或 vuejs 单击列表组项目时使其处于活动状态？

【英文标题】：Bootstrap 4 : How to make the item of list-group active when clicking it via jquery or 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做到这一点？提前致谢！

【参考方案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