'How do I make list group item active without anchor tags?

I want to style a basic list-group item active to highlight it (change background color etc). Bootstrap supports the active class just through Linked items.

I have something like: 

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

to make Cras justo odio style as active what is the best practice to do that?

htmlcsstwitter-bootstrap-3


Solution 1:[1]

You need to locate all of the list items and remove the active class from them. Then you need to set the active class on the clicked item. You can do something like this...

https://jsfiddle.net/gtzqw471/2/

Solution 2:[2]

There is straight solution for you. The better option should be use a with default cursor 

.my-list {
  cursor: default;
}
<ul id="my-list" class="list-group">
  <a class="list-group-item active">Cras justo odio</a>
  <a class="list-group-item">Dapibus ac facilisis in</a>
  <a class="list-group-item">Morbi leo risus</a>
  <a class="list-group-item">Porta ac consectetur ac</a>
  <a class="list-group-item">Vestibulum at eros</a>
</ul>

demo http://www.bootply.com/117174

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rush Frisby
Solution 2 Niveditha Karmegam

Related Questions