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

Change Background color of Active list item in bootstrap

提问by Muhammad Taqi

I have item group list

我有项目组列表

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

I want to change background of active list item, I Know how to change background, but I am unable to get which list is active, or inactive by JavaScript, tried lots of solution given on others but didn't woJrk.

我想更改活动列表项的背景，我知道如何更改背景，但我无法通过 JavaScript 获取哪个列表处于活动状态或非活动状态，尝试了很多其他人提供的解决方案但没有成功。

JsFiddle

提琴手

UPDATE:

更新：

采纳答案by Muhammad Taqi

What i does it assign and id to every link in list that is also the page name, and made a js function that is called on body load of the page. the function get the current file name from url and determines which page is this, then by js i made that link class active. this solve my problem. however i share this solution for others to improvement.

我所做的是为列表中的每个链接（也是页面名称）分配和 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>

回答by Rob Scott

Don't know why bootstrap isn't doing it, but here's some jQuery on a fiddlefor you. The alert is displaying the hrefthat is active.

不知道为什么 bootstrap 不这样做，但这里有一些 jQuery为您提供了一个小提琴。警报显示的href是活动的。

Is that what you're after?

这就是你追求的吗？

回答by Tushar

Add the following css in your code as :

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

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

}

Demo

演示

回答by Bolza

The solution is simple but maybe not obvious. You can pass this(the clicked element) to an onclickevent handler and then set the activeclass on the selected menu.

解决方案很简单，但可能并不明显。您可以将this（单击的元素）传递给onclick事件处理程序，然后active在所选菜单上设置类。

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

I created this Fiddle to answer your question

我创建了这个小提琴来回答你的问题

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

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

The script can be greatly improved, this is just an example. I'm not aware of any non-JS way to achieve the same result.

脚本可以大大改进，这只是一个例子。我不知道有任何非 JS 方法可以达到相同的结果。

You can also store the old activated element so you don't have to use query selector every time, in this way the script would be

您还可以存储旧的激活元素，这样您就不必每次都使用查询选择器，这样脚本将是

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

Bu then you have to initialize currentwith the value of the starting element.

但是，您必须current使用起始元素的值进行初始化。

Adding Persistency

添加持久性

Of course any change to the style of an element can't survive after a refresh without implementing some kind of persistency that is something completely different than the simple implementation. Keep in mind that there are hundreds of different ways to achieve this, one of which is NOT refreshing at all the page.

当然，如果不实现某种与简单实现完全不同的持久性，则元素样式的任何更改都无法在刷新后继续存在。请记住，有数百种不同的方法可以实现这一点，其中之一是根本不刷新页面。

Anyway if you prefer the quick and dirt way then using localStorageis probably the best solution. This is a simple implementation

无论如何，如果您更喜欢快速而肮脏的方式，那么使用 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'));
}

Basically you save something that you can use to recognize the element that was selected, in this case i used the hrefattribute value because in our case that is unique, but you could also assign id or other attributes to the elements and use that. Then on load i read the localStorage to retrieve the saved hrefand if found i get the element inside the page using a simple querySelector.

基本上你保存了一些你可以用来识别被选择元素的东西，在这种情况下我使用了href属性值，因为在我们的例子中它是唯一的，但你也可以为元素分配 id 或其他属性并使用它。然后在加载时我读取 localStorage 以检索保存的内容href，如果找到，我使用简单的querySelector获取页面内的元素。

Just remember that copy-pasting this kind of solution doesnt help you building better websites, you should read articles on the internet and implement what solution is best for your own use case.

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

回答by Savan Gadhiya

Just to change the active item background color, (I've changed to grey from default - blue) add this to your css:

只是为了更改活动项目的背景颜色，（我已从默认更改为灰色 - 蓝色）将其添加到您的 css 中：

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