Change Background color of Active list item in bootstrap

Question

I have item group list

<div id="MainMenu">
    <div class="list-group panel">
        <a href="#why" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Menu 1</a>
        <div class="collapse" id="why">
            <a href="" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Menu 1 a</a>
            <a href="" class="list-group-item">Menu 1 b</a>
            <a href="" class="list-group-item">Menu 1 c</a>
            <a href="" class="list-group-item">Menu 1 d</a>
            <a href="" class="list-group-item">Menu 1 e</a>
            <a href="" class="list-group-item">Menu 1 f</a>
        </div>
        <a href="#joinus" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Menu 2</a>
        <div class="collapse" id="joinus">
            <a href="" class="list-group-item">Menu 2 a</a>
            <a href="" class="list-group-item">Menu 2 b</a>
            <a href="" class="list-group-item">Menu 2 c</a>
            <a href="" class="list-group-item">Menu 2 d</a>
            <a href="" class="list-group-item">Menu 2 e</a>
        </div>
    </div>
</div>

I want to change background of active list item, I Know how to change background, but I am unable to get which list is active, or inactive by JavaScript, tried lots of solution given on others but didn't woJrk.

JsFiddle

UPDATE:

Are you using the 'active' class to make list-group-items active? And are you using jQuery? — Peter, Apr 21 '15 at 08:58
possible duplicate http://stackoverflow.com/questions/12040820/find-active-tab-using-jquery-and-twitter-bootstrap - I agree w/ @Peter - usually you always start w/ an `.active` class assigned to one of the tabs/list items, etc. Then when the user switches it, bootstrap automatically changes the `.active` class — Rob Scott, Apr 21 '15 at 08:59
@RobScott Have a look at the `Fiddle` it didn't work as expected — Muhammad Taqi, Apr 21 '15 at 09:24

Rob Scott · Answer 1 · 2022-09-01T19:33:00.177

Don't know why bootstrap isn't doing it, but here's some jQuery on a fiddle for you. The alert is displaying the href that is active.

Is that what you're after?

Update - 09/01/2022

Edited the old fiddle, here's the new one http://jsfiddle.net/dh7t3cbp/1/

$('.list-group').on('click', '> a', function(e) {
  var $this = $(this);
  $('.list-group').find('.active').removeClass('active');
  $this.addClass('active');

  alert($this.attr('href') + ' is active');
});

$('.list-group .collapse').on('click', '> a', function(e) {
  var $this = $(this),
    $parent = $this.parent('.collapse');
  $parent.find('.active').removeClass('active');
  $this.addClass('active');

  alert($this.attr('href') + ' is active');
});

.list-group panel.active, .list-group panel.active a.active {
  background-color: #030;
  border-color: #aed248;
}

sorry - i thought "list-item" was the main list. you could just add `.active a.list-group-item { background-color: #HEX; }` to your CSS — Rob Scott, Apr 21 '15 at 12:06

score 3 · Answer 2 · answered Apr 21 '15 at 09:35

3

Add the following css in your code as :

.list-group-item[aria-expanded="true"]{
     background-color: black !important;
  border-color: #aed248;

}

Demo

answered Apr 21 '15 at 09:35

Tushar Gupta

15,504
1
29
47

The background only changes for `menu` not their `sub-menu` – Muhammad Taqi Apr 21 '15 at 10:11

score 3 · Accepted Answer · edited Dec 20 '19 at 11:32

What i does it assign and id to every link in list that is also the page name, and made a js function that is called on body load of the page. the function get the current file name from url and determines which page is this, then by js i made that link class active. this solve my problem. however i share this solution for others to improvement.

function get_current_page() {
  var pathArray = window.location.pathname.split("/");
  var current_page = pathArray[pathArray.length - 1];
  current_page_array = current_page.split(".");
  current_page = current_page_array[0];

  if (
    current_page == "students" ||
    current_page == "my-profile" ||
    current_page == "faqs" ||
    current_page == "forecast-career"
  ) {
    document.getElementById("joinuslist").className += " active";
    document.getElementById("joinus").className += " in";

    if (current_page == "students") {
      document.getElementById("students").className += " active";
    } else if (current_page == "faqs") {
      document.getElementById("faqs").className += " active";
    } else if (current_page == "forecast-career") {
      document.getElementById("forecast-career").className += " active";
    } else if (current_page == "my-profile") {
      document.getElementById("my-profile").className += " active";
    } else {
    }
  } else if (
    current_page == "values" ||
    current_page == "ambassadors" ||
    current_page == "documentary"
  ) {
    if (current_page == "values") {
      document.getElementById("values").className += " active";
    } else if (current_page == "ambassadors") {
      document.getElementById("ambassadors").className += " active";
    } else if (current_page == "documentary") {
      document.getElementById("documentary").className += " active";
    } else {
    }
  }
}

.list-group-item.active:hover {
  background-color: #aed248 !important;
  border-color: #aed248 !important;
}
.list-group-item.active,
.list-group-item.active:hover {
  background-color: #007715 !important;
  border-color: #aed248 !important;
}

#joinus .list-group-item.active,
.list-group-item.active:hover {
  background-color: #adce1b !important;
  border-color: #adce1b !important;
}
#whyptcl .list-group-item.active,
.list-group-item.active:hover {
  background-color: #adce1b !important;
  border-color: #adce1b !important;
}
.panel {
  margin-bottom: 20px;
  background-color: transparent !important;
  border: 0px solid transparent;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

<body onload="get_current_page()">
  <div id="MainMenu">
    <div class="list-group panel">
      <a
        id="whylist"
        href="#why"
        class="list-group-item"
        data-toggle="collapse"
        data-parent="#MainMenu"
        >Menu 1</a
      >
      <div class="collapse" id="why">
        <a
          id="values"
          href="values.html"
          onclick="activate(this)"
          class="list-group-item"
          data-toggle="collapse"
          data-parent="#SubMenu1"
          >Menu 1 a</a
        >
        <a
          id="ambassadors"
          href="ambassadors.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 1 b</a
        >
        <a
          id="documentary"
          href="documentary.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 1 c</a
        >
      </div>
      <a
        id="joinuslist"
        href="#joinus"
        class="list-group-item"
        data-toggle="collapse"
        data-parent="#MainMenu"
        >Menu 2</a
      >
      <div class="collapse" id="joinus">
        <a
          id="my-profile"
          href="my-profile.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 a</a
        >
        <a
          id="students"
          href="students.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 b</a
        >
        <a
          id="forecast-career"
          href="forecast-career.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 c</a
        >
        <a
          id="faqs"
          href="faqs.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 e</a
        >
      </div>
    </div>
  </div>
</body>

Bolza · Answer 4 · 2015-04-28T10:22:38.707

The solution is simple but maybe not obvious. You can pass this (the clicked element) to an onclick event handler and then set the active class on the selected menu.

var activate = function(el) {    
    var current = document.querySelector('.active');
    if (current) {
        current.classList.remove('active');
    }
    el.classList.add('active');
}

I created this Fiddle to answer your question

http://jsfiddle.net/Ltp9qLox/9/

The script can be greatly improved, this is just an example. I'm not aware of any non-JS way to achieve the same result.

You can also store the old activated element so you don't have to use query selector every time, in this way the script would be

var current;
var activate = function(el) {    
    if (current) {
        current.classList.remove('active');
    }
    current = el;
    el.classList.add('active');
}

Bu then you have to initialize currentwith the value of the starting element.

Adding Persistency

Of course any change to the style of an element can't survive after a refresh without implementing some kind of persistency that is something completely different than the simple implementation. Keep in mind that there are hundreds of different ways to achieve this, one of which is NOT refreshing at all the page.

Anyway if you prefer the quick and dirt way then using localStorage is probably the best solution. This is a simple implementation

var currentHref = localStorage.getItem("currentSelected");
var current = currentHref ? document.querySelector('[href="'+currentHref+'"]') : null;
function activate(el) {    
    if (current && current !== el) {
        current.classList.remove('active');
    }
    current = el;
    current.classList.add('active');
    localStorage.setItem("currentSelected", current.getAttribute('href'));
}

Basically you save something that you can use to recognize the element that was selected, in this case i used the href attribute value because in our case that is unique, but you could also assign id or other attributes to the elements and use that. Then on load i read the localStorage to retrieve the saved href and if found i get the element inside the page using a simple querySelector.

Just remember that copy-pasting this kind of solution doesnt help you building better websites, you should read articles on the internet and implement what solution is best for your own use case.

How would I store, because when i click on the any link and page refreshes then it didn't save the previous states? — Muhammad Taqi, Apr 28 '15 at 05:48
@MTaqi i added the persistency section to the answer. If you feel this answers your question please remember to accept the answer otherwise the question will stay open. — Bolza, Apr 28 '15 at 10:24

score 0 · Answer 5 · answered Dec 20 '19 at 09:17

0

Just to change the active item background color, (I've changed to grey from default - blue) add this to your css:

.list-group-item.active {
background-color: grey;
border-color: grey; }

answered Dec 20 '19 at 09:17

Savan Gadhiya

1,082
2
11
16

Emre Kahriman · Answer 6 · 2022-09-01T12:27:55.470

0

You can add these Bootstrap classes;

.list-group-item-dark
.list-group-item-success
.list-group-item-warning
.list-group-item-primary
.list-group-item-danger
.list-group-item-secondary
.list-group-item-info

edited Sep 01 '22 at 12:27

answered Sep 01 '22 at 12:26

Emre Kahriman

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – jasie Sep 06 '22 at 12:32

Change Background color of Active list item in bootstrap

6 Answers6