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激活，尝试了很多解决方案，但其他人并没有做到这一点

JsFiddle

更新：

Answer 1

不知道为什么bootstrap没有这样做，但是fiddle为你提供了一些jQuery。警报显示活动的href。

这就是你追求的目标吗？

Answer 2

在您的代码中添加以下css：

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

}

<强> Demo

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。

添加持久性

当然，对元素样式的任何更改都无法在刷新后生存，而不会实现某种与简单实现完全不同的持久性。请记住，有数百种不同的方法可以实现这一目标，其中一种方法是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获取页面内的元素。

请记住，复制粘贴这种解决方案并不能帮助您构建更好的网站，您应该阅读互联网上的文章并实施最适合您自己用例的解决方案。

Answer 4

我做的是为列表中的每个链接分配和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{

              }

            }

        }

Answer 5

只需更改活动项目的背景颜色，（将默认颜色更改为灰色-蓝色），即可将其添加到您的CSS中：

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

更改引导程序中活动列表项的背景颜色

5 个答案: