Изменения цвета фона активного элемента списка в загрузчике

У меня есть список групп пунктаИзменения цвета фона активного элемента списка в загрузчике

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

источник

2015-04-21 Muhammad Taqi

Вы используете «активный» класс, чтобы активировать элементы списка? И вы используете jQuery? – Peter

Возможный дубликат http://stackoverflow.com/questions/12040820/find-active-tab-using-jquery-and-twitter-bootstrap - Я согласен с @Peter - обычно вы всегда начинаете с класса '.active' назначается одному из элементов табуляции/списка и т. д. Затем, когда пользователь переключает его, бутстрап автоматически меняет класс '.active' –

@RobScott. Посмотрите на' Fiddle', он не работал должным образом –

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

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

       } 

      } 

     }

источник

2015-06-07 19:48:09

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

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

источник

2015-04-21 09:34:59

Только фон изменения для 'menu' не их' подменю' –

извините - я думал, что «list-item» был основным списком. вы можете просто добавить '.active a.list-group-item {background-color: #HEX; } 'к вашему CSS –

Добавьте следующий CSS в вашем коде, как:

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

}

Demo

источник

2015-04-21 09:35:21 Tushar

Фон только изменяет для' menu' не их 'подменю' –

Решение простое, но, возможно, не очевидно. Вы можете передать (щелкнув элемент) в обработчик события 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/

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

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

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

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

Добавление Постоянству

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

В любом случае, если вы предпочитаете быстрый и грязный путь, то using 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.

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

источник

2015-04-21 09:42:31 Bolza

Как бы я хранил, потому что, когда я нажимаю на ссылку и обновляю страницу, она не сохраняет предыдущие состояния? –

@MTaqi я добавил раздел стойкости к ответу. Если вы чувствуете, что это отвечает на ваш вопрос, не забудьте принять ответ, иначе вопрос останется открытым. – Bolza

Изменения цвета фона активного элемента списка в загрузчике

ответ

Смежные вопросы