Zmiana koloru tła Active elementu listy w bootstrap

Mam lista grupę pozycjiZmiana koloru tła Active elementu listy w bootstrap

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

chcę zmienić tło aktywnego elementu listy, wiem jak zmienić tło, ale nie jestem w stanie dostać których lista jest aktywny lub nieaktywny przez JavaScript, próbował wielu rozwiązań podanych na innych, ale nie pracował.

JsFiddle

UPDATE:

Źródło

2015-04-21 Muhammad Taqi

Czy używasz klasy "aktywnej" do aktywacji elementów listy? Czy używasz jQuery? – Peter

możliwy duplikat http://stackoverflow.com/questions/12040820/find-active-tab-using-jquery-and-twitter-bootstrap - Zgadzam się w/@Peter - zwykle zawsze zaczynasz od klasy ".active" przypisany do jednego z elementów tab/list itp. Następnie, gdy użytkownik go przełącza, bootstrap automatycznie zmienia klasę '.active' –

@RobScott Zobacz" Fiddle ", który nie działał zgodnie z oczekiwaniami. –

To, co robię, przypisuję i id do każdego linka na liście, który jest również nazwą strony, i wykonałem funkcję js, która jest wywoływana przy obciążeniu strony. funkcja pobiera aktualną nazwę pliku z adresu url i określa, która strona jest ta, następnie przez js uczyniłem tę klasę linku aktywną. to rozwiązuje mój problem. jednak dzielę się tym rozwiązaniem, aby inni mogli je ulepszyć.

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

       } 

      } 

     }

Źródło

2015-06-07 19:48:09

Nie wiem dlaczego bootstrap nie robi to, ale tutaj jest trochę jQuery na fiddle dla Ciebie. W ostrzeżeniu wyświetlany jest aktywny href.

Czy tego właśnie szukasz?

Źródło

2015-04-21 09:34:59

Tylko w tle zmiany dla 'menu' nie ich' podmenu' –

przepraszam - myślałem, że "lista pozycji" była główną listą. możesz po prostu dodać '.active a.list-group-item {background-color: #HEX; } 'to your CSS –

Dodaj następujący kod CSS w kodzie jak:

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

}

Demo

Źródło

2015-04-21 09:35:21 Tushar

Tło zmienia się tylko dla' menu', a nie dla ich "podmenu" –

Rozwiązanie jest proste, ale może nie jest oczywiste. Możesz przekazać this (kliknięty element) do obsługi zdarzeń onclick, a następnie ustawić klasę active w wybranym menu.

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

Stworzyłem ten Fiddle odpowiedzi na pytanie

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

Skrypt może być znacznie lepszy, to jest tylko przykład. Nie jestem świadomy żadnej metody innej niż JS, aby osiągnąć ten sam rezultat.

Można również zapisać starego elementu aktywnego, dzięki czemu nie trzeba używać selektor zapytania za każdym razem, w ten sposób skrypt byłby

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

Bu potem trzeba zainicjować current z wartością element początkowy.

Dodawanie trwałości

Oczywiście wszelkie zmiany w stylu elementu nie może przetrwać po odświeżeniu bez wykonania pewnego rodzaju trwałości, która jest czymś zupełnie innym niż prosty realizacji. Należy pamiętać, że istnieją setki różnych sposobów osiągnięcia tego celu, jednym z nich jest NOT refreshing at all the page.

W każdym razie, jeśli wolisz szybką i brudną drogę, to prawdopodobnie najlepsze rozwiązanie to using localStorage. Jest to prosta implementacja

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

Zasadniczo zapisać coś, co można wykorzystać do uznania elementu, który został wybrany w tym przypadku użyłem wartość atrybutu href ponieważ w naszym przypadku, że jest wyjątkowy, ale można również przypisać id lub inne atrybuty elementów i użyj tego. Następnie, po załadowaniu, odczytam localStorage, aby pobrać zapisane href, a jeśli znalazłem, otrzymam element wewnątrz strony za pomocą prostego querySelector.

Pamiętaj tylko, że wklejanie tego typu rozwiązań nie pomaga w budowaniu lepszych stron internetowych, powinieneś czytać artykuły w Internecie i wdrażać najlepsze rozwiązania dla własnego przypadku.

Źródło

2015-04-21 09:42:31 Bolza

Jak mam je przechowywać, ponieważ po kliknięciu dowolnego odsyłacza i odświeżeniu strony nie zapisano poprzednich stanów? –

@MTaqi Dodałem sekcję trwałości do odpowiedzi. Jeśli uważasz, że to odpowiada na twoje pytanie, pamiętaj, aby zaakceptować odpowiedź, w przeciwnym razie pytanie pozostanie otwarte. – Bolza

Zmiana koloru tła Active elementu listy w bootstrap

Odpowiedz

Powiązane problemy