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

this is the component:

    <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

the first item is active,but clicking another one will not make it active,how to do it via jquery or vuejs? thanks in advance!

clay

9 years ago

Level 20

Here's one solution from stack overflow. Play with it to suit your needs. You can handle it without jquery as well. http://stackoverflow.com/questions/33173398/vuejs-getting-the-element-that-is-being-called-by-an-event

1 like

kopmanis

7 years ago

Level 1

@clay ... that solution uses the embedded copy of jQuery. It DOES use jQuery, you just don't have to explicitly include it.

Please or to participate in this conversation.