Thay đổi màu nền của Active danh mục trong bootstrap

Tôi có danh sách nhóm mụcThay đổi màu nền của Active danh mục trong 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>

Tôi muốn thay đổi nền của mục danh sách hoạt động, tôi biết làm thế nào để thay đổi hình nền, nhưng tôi không thể nhận được mà danh sách là hoạt động hoặc không hoạt động bằng JavaScript, đã thử nhiều giải pháp được cung cấp trên những người khác nhưng không sử dụng woJrk.

JsFiddle

UPDATE:

Nguồn

2015-04-21 Muhammad Taqi

Bạn đang sử dụng lớp 'hoạt động' để làm cho các mục danh sách nhóm hoạt động? Và bạn đang sử dụng jQuery? – Peter

có thể trùng lặp http://stackoverflow.com/questions/12040820/find-active-tab-using-jquery-and-twitter-bootstrap - Tôi đồng ý w/@Peter - thường bạn luôn bắt đầu w/một lớp '.active' được gán cho một trong các tab/danh sách các mục, vv Sau đó, khi người dùng chuyển nó, bootstrap sẽ tự động thay đổi lớp '.active' –

@RobScott Hãy nhìn vào' Fiddle' nó không hoạt động như mong đợi –

Tôi gán nó và id cho mọi liên kết trong danh sách cũng là tên trang và tạo hàm js được gọi là tải nội dung của trang. hàm nhận tên tệp hiện tại từ url và xác định trang nào là trang này, sau đó là js tôi đã tạo lớp liên kết đó hoạt động. điều này giải quyết vấn đề của tôi. tuy nhiên tôi chia sẻ giải pháp này cho những người khác để cải thiện.

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

       } 

      } 

     }

Nguồn

2015-06-07 19:48:09

Không biết tại sao bootstrap không làm việc đó, nhưng đây là một số jQuery trên fiddle cho bạn. Cảnh báo hiển thị số href đang hoạt động.

Đó có phải là những gì bạn đang theo dõi không?

Nguồn

2015-04-21 09:34:59

Chỉ nền thay đổi cho 'menu' không phải là 'menu phụ' –

xin lỗi - tôi nghĩ" danh sách mục "là danh sách chính. bạn chỉ có thể thêm '.active a.list-group-item {background-color: #HEX; } 'vào CSS –

Thêm css sau trong mã của bạn như:

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

}

Demo

Nguồn

2015-04-21 09:35:21 Tushar

Nền chỉ thay đổi cho' menu' không phải là 'menu phụ' –

Giải pháp là đơn giản nhưng có lẽ không rõ ràng. Bạn có thể vượt qua this (phần tử được nhấp) vào trình xử lý sự kiện onclick và sau đó đặt lớp active trên menu đã chọn.

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

Tôi tạo ra Fiddle này để trả lời câu hỏi của bạn

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

Các kịch bản có thể được cải thiện rất nhiều, đây chỉ là một ví dụ. Tôi không biết về bất kỳ cách nào không phải JS để đạt được kết quả tương tự.

Bạn cũng có thể lưu trữ các yếu tố kích hoạt cũ, do đó bạn không cần phải sử dụng chọn truy vấn mỗi lần, bằng cách này kịch bản sẽ là

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

Bu sau đó bạn phải khởi tạo current với giá trị của yếu tố khởi đầu.

Thêm Persistency

Tất nhiên bất kỳ thay đổi phong cách của một phần tử không thể sống sót sau khi làm mới mà không cần thực hiện một số loại persistency đó là một cái gì đó hoàn toàn khác với việc thực hiện đơn giản. Hãy nhớ rằng có hàng trăm cách khác nhau để đạt được điều này, một trong số đó là NOT refreshing at all the page.

Dù sao nếu bạn thích cách nhanh chóng và bẩn thì using localStorage có lẽ là giải pháp tốt nhất. Đây là một thực hiện đơn giản

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

Về cơ bản giúp bạn tiết kiệm một cái gì đó mà bạn có thể sử dụng để nhận ra yếu tố đó đã được lựa chọn, trong trường hợp này tôi sử dụng giá trị href thuộc tính vì trong trường hợp của chúng tôi đó là duy nhất, nhưng bạn cũng có thể gán id hoặc các thuộc tính khác cho các phần tử và sử dụng nó. Sau đó, khi tải tôi đọc localStorage để truy xuất số đã lưu href và nếu tôi tìm thấy phần tử bên trong trang bằng cách sử dụng đơn giản querySelector.Hãy nhớ rằng việc sao chép các loại giải pháp này không giúp bạn xây dựng trang web tốt hơn, bạn nên đọc các bài viết trên internet và triển khai giải pháp nào là tốt nhất cho trường hợp sử dụng của riêng bạn.

Nguồn

2015-04-21 09:42:31 Bolza

Làm cách nào để lưu trữ, vì khi tôi nhấp vào liên kết và trang làm mới thì nó không lưu các trạng thái trước đó? –

@MTaqi i đã thêm phần kiên trì vào câu trả lời. Nếu bạn cảm thấy điều này trả lời câu hỏi của bạn, hãy nhớ chấp nhận câu trả lời nếu không câu hỏi sẽ vẫn mở. – Bolza

Thay đổi màu nền của Active danh mục trong bootstrap

Trả lời

Các vấn đề liên quan