如何为导航菜单中的两个元素设置活动背景颜色答案

【问题标题】：How can i make active background color for two elements in nav menu如何为导航菜单中的两个元素设置活动背景颜色
【发布时间】：2019-12-07 14:40:22
【问题描述】：

我有一个带有 2 个块的垂直导航栏菜单。首先是带有图标的导航，其次是菜单的文本。它们有不同的背景颜色。如何为两个活动导航块制作一种背景颜色？ design of menu

<div class="menu__icons">
  <ul class="menu__list">
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
  </ul>
</div>
<div class="menu__text">
  <ul class="menu__list">
    <li><a class="menu__item" href="#">First</a></li>
    <li><a class="menu__item" href="#">Second</a></li>
    <li><a class="menu__item" href="#">Third</a></li>
    <li><a class="menu__item" href="#">Fourth</a></li>
  </ul>
</div>
</div>

https://jsfiddle.net/levan563/1g5ucmwq/2/

【问题讨论】：

你能把你所有的HTML代码粘贴到这里吗？你的问题还没有很好地定义。
@ibnelaiq 添加了，但我仍然不知道这是不是一个好的解决方案
您想将两个背景设置为相同的颜色，还是希望它与图像中的颜色相同？你的问题不清楚
@Screenload 与图片中的一样。当元素处于活动状态时，图标和文本需要具有一种背景颜色

标签： html css twitter-bootstrap menu html-lists

【解决方案1】：

基本上，如果您想切换 .active 并且您不想要两个单独的列表标记。

请注意，font-awesome 仅用于演示目的。

.menu__item {
  width: 250px;
  height: 50px;
  text-align: left;
}

.menu__item.active {
  background-color: #e9ebfd;
}

.menu__item.active .menu__icon {
  background-color: #e9ebfd;
  border-left: 4px solid #2c39ec;
}

.menu__item.active .menu__title {
  background-color: #e9ebfd;
}

.menu__item a:hover {
  text-decoration: none;
}

.menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fafafa;
  color: #2c39ec;
}

.menu__title {
  display: inline-block;
  padding-left: 20px;
  color: #777777;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
  <ul class="menu__list list-unstyled">
    <li class="menu__item active">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-tachometer-alt"></i>
        </div>
        <div class="menu__title">Main Dashboard</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-user"></i>
        </div>
        <div class="menu__title">Profile</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-bell"></i>
        </div>
        <div class="menu__title">Finances</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-calendar"></i>
        </div>
        <div class="menu__title">Titles</div>
      </a>
    </li>
  </ul>
</nav>

【讨论】：

欢迎您。请注意单位（例如宽度：250px）仅用于演示。在你的项目中它可能是别的东西。你也可以用很棒的字体替换你自己的设计图标。

【解决方案2】：

据我了解，两个块的 li 都使用 active 类，并尝试使用字体、svg 图标或透明背景图像而不是块图像

.menu__list .active {
   background-color: red;
}

<div class="menu__icons">
    <ul class="menu__list">
        <li><a class="menu__item active" href="#">
          <img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
          </a></li>
    </ul>
</div>
<div class="menu__text">
    <ul class="menu__list">
        <li><a class="menu__item active" href="#">First</a></li>
    </ul>
</div>

【讨论】：

【解决方案3】：

使用 jQuery 是可行的。

假设您在两个块中的列表项数量相同，

$(function(){
 $('.menu__list li').on('click', function() {
  var idx = $(this).index();
  $('.menu__list li').removeClass('active');
  $('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});

还在 css 中添加 .active 类，并为 li 项目提供所需的样式

.active{
/**your style**/
}
.active > a{

}

.active img{

}

【讨论】：