我有项目组列表
<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激活，尝试了很多解决方案，但其他人并没有做到这一点
更新：
答案 0 :(得分：5)
不知道为什么bootstrap没有这样做，但是fiddle为你提供了一些jQuery。警报显示活动的href。
这就是你追求的目标吗？
答案 1 :(得分：2)
在您的代码中添加以下css：
.list-group-item[aria-expanded="true"]{
background-color: black !important;
border-color: #aed248;
}
<强> Demo
答案 2 :(得分：2)
解决方案很简单，但可能并不明显。
您可以将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。
添加持久性
当然，对元素样式的任何更改都无法在刷新后生存，而不会实现某种与简单实现完全不同的持久性。请记住，有数百种不同的方法可以实现这一目标，其中一种方法是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获取页面内的元素。
请记住，复制粘贴这种解决方案并不能帮助您构建更好的网站，您应该阅读互联网上的文章并实施最适合您自己用例的解决方案。
答案 3 :(得分：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{
}
}
}
答案 4 :(得分：0)
只需更改活动项目的背景颜色，（将默认颜色更改为灰色-蓝色），即可将其添加到您的CSS中：
.list-group-item.active {
background-color: grey;
border-color: grey; }