在引导程序中更改活动列表项的背景颜色

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:

Answer 1

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?

Answer 2

Add the following css in your code as :

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

}

Demo

Answer 3

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 current with 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.

Answer 4

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>

Answer 5

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

Answer 6

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