Изменить цвет фона элемента Active 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>

Я хочу изменить фон активного элемента списка, я знаю, как изменить фон, но я не могу получить, какой список активен или неактивен JavaScript, попробовал много решений, заданных на других, но не сделал woJrk.

JsFiddle

UPDATE:

Ответы

Ответ 1

Что я назначаю и id для каждой ссылки в списке, которая также является именем страницы, и создала функцию js, вызываемую при загрузке тела страницы. функция получает текущее имя файла из url и определяет, какая страница это, а затем js я сделал этот класс ссылок активным. это решает мою проблему. однако я разделяю это решение для улучшения других.

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

        <style type="text/css">
          .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,.05);
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
          }
        </style>

        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{

              }

            }

        }

Ответ 2

Не знаю, почему bootstrap не делает этого, но здесь некоторые jQuery на fiddle для вас. В предупреждении отображается активная href.

Это то, что вам нужно?

Ответ 3

Решение прост, но, возможно, не очевидно. Вы можете передать this (щелкнутый элемент) в обработчик события onclick, а затем установить класс active в выбранном меню.

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

Я создал этот скрипт, чтобы ответить на ваш вопрос

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

script может быть значительно улучшен, это просто пример. Я не знаю ни одного способа не-JS для достижения того же результата.

Вы также можете сохранить старый активированный элемент, поэтому вам не нужно использовать селектор запросов каждый раз, таким образом script будет

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

Bu, тогда вы должны инициализировать current значением исходного элемента.

Добавление стойкости

Конечно, любое изменение стиля элемента не может сохраниться после обновления без реализации какой-либо постоянной, что является чем-то совершенно иным, чем простая реализация. Имейте в виду, что для достижения этого существуют сотни различных способов, один из которых НЕ обновляется на всех страницах.

В любом случае, если вы предпочитаете быстрый и грязный путь, то с помощью localStorage, вероятно, лучшее решение. Это простая реализация

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

В основном вы сохраняете то, что можете использовать для распознавания выбранного элемента, в этом случае я использовал значение атрибута href, потому что в нашем случае это уникально, но вы также можете назначить id или другие атрибуты элементам и использовать это. Затем при загрузке я читаю localStorage для извлечения сохраненного href, и если он найден, я получаю элемент внутри страницы с помощью простого querySelector.

Просто помните, что копирование такого типа не помогает вам создавать лучшие веб-сайты, вы должны читать статьи в Интернете и реализовывать то, какое решение лучше всего подходит для вашего собственного использования.

Ответ 4

Добавьте следующий код css в свой код:

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

}

Демо