在引導程序中更改活動列表項的背景顏色

Question

我有項目組列表

<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 獲取哪個列表處於活動狀態或不活動狀態，嘗試了很多其他人給出的解決方案，但沒有成功。

提琴手

更新：

Answer 1

不知道為什么 bootstrap 不這樣做，但這里有一些 jQuery 為您提供了一個小提琴。 警報顯示活動的href 。

這就是你追求的嗎？

Answer 2

在您的代碼中添加以下 css 為：

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

}

演示

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

腳本可以大大改進，這只是一個例子。 我不知道有任何非 JS 方法可以達到相同的結果。

您還可以存儲舊的激活元素，這樣您就不必每次都使用查詢選擇器，這樣腳本將是

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

然后你必須用起始元素的值初始化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獲取頁面內的元素。

請記住，復制粘貼這種解決方案並不能幫助您構建更好的網站，您應該閱讀互聯網上的文章並實施最適合您自己用例的解決方案。

Answer 4

我所做的是為列表中的每個鏈接分配和 id，也是頁面名稱，並創建了一個在頁面主體加載時調用的 js 函數。 該函數從 url 獲取當前文件名並確定這是哪個頁面，然后通過 js 我使該鏈接類處於活動狀態。 這解決了我的問題。 但是我分享了這個解決方案供其他人改進。

 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

只是為了更改活動項目的背景顏色，（我已從默認更改為灰色 - 藍色）將其添加到您的 css 中：

.list-group-item.active {
background-color: grey;
border-color: grey; }

Answer 6

您可以添加這些 Bootstrap 類；

.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