logo标签列表

在Bootstrap中更改活动列表项的背景颜色

javascripthtmlcsstwitter-bootstrap
13

我有一组物品清单

<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

更新：

你是否使用“active”类来激活列表组项？并且你是否在使用jQuery？ - Peter
可能重复的问题 https://dev59.com/42ct5IYBdhLWcg3wgNnR - 我同意@Peter的观点 - 通常你总是从一个标签/列表项等分配一个.active类开始。然后当用户切换时，bootstrap会自动更改.active类。 - Rob Scott
@RobScott 看看这个Fiddle，它的工作结果不如预期。 - Muhammad Taqi
6个回答
6
不知道为什么Bootstrap无法实现，但是这里有一个关于jQuery的fiddle。弹出窗口显示当前活动的href。
这符合你的要求吗？
更新 - 2022年9月1日 编辑了旧的代码，这是新的代码：http://jsfiddle.net/dh7t3cbp/1/。
$('.list-group').on('click', '> a', function(e) {
  var $this = $(this);
  $('.list-group').find('.active').removeClass('active');
  $this.addClass('active');

  alert($this.attr('href') + ' is active');
});

$('.list-group .collapse').on('click', '> a', function(e) {
  var $this = $(this),
    $parent = $this.parent('.collapse');
  $parent.find('.active').removeClass('active');
  $this.addClass('active');

  alert($this.attr('href') + ' is active');
});

.list-group panel.active, .list-group panel.active a.active {
  background-color: #030;
  border-color: #aed248;
}
背景只会在“菜单”而不是它们的“子菜单”中更改。 - Muhammad Taqi
1
抱歉 - 我原以为 "list-item" 是主要的列表。你只需在你的 CSS 中添加 .active a.list-group-item { background-color: #HEX; }。 - Rob Scott
3
将以下 CSS 添加到您的代码中：
.list-group-item[aria-expanded="true"]{
     background-color: black !important;
  border-color: #aed248;

}

Demo

背景只会在“菜单”而不是它们的“子菜单”中更改。 - Muhammad Taqi
3

我的做法是给列表中的每个链接分配一个与页面名称相同的ID，然后创建一个JavaScript函数，在页面加载时调用该函数。该函数从URL中获取当前文件名并确定当前页面，然后通过JavaScript将该链接标记为活动状态。这解决了我的问题。但我想分享这个解决方案以供他人改进。

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>

2
解决方案很简单，但可能不太明显。您可以将被点击的元素（即this）传递给一个onclick事件处理程序，然后在所选菜单上设置active类。
var activate = function(el) {    
    var current = document.querySelector('.active');
    if (current) {
        current.classList.remove('active');
    }
    el.classList.add('active');
}

我创建了这个Fiddle来回答你的问题。

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

基本上，您保存了可以用于识别所选元素的内容，这种情况下我使用了属性值，因为在我们的情况下这是唯一的，但是您也可以给元素分配ID或其他属性并使用它们。然后，在加载时，我读取localStorage以检索保存的href，如果找到，则使用简单的querySelector获取页面内的元素。

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

我该怎样存储，因为当我点击任何链接并刷新页面时，它不会保存先前的状态？ - Muhammad Taqi
@MTaqi 我在答案中添加了持久性部分。如果你觉得这个回答解决了你的问题，请记得接受答案，否则问题将保持开放状态。 - Bolza
0

您可以添加这些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
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - jasie
0

如果要更改活动项目的背景颜色（我已将其从默认的蓝色更改为灰色），请将以下内容添加到您的CSS中：

.list-group-item.active {
background-color: grey;
border-color: grey; }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接