时间戳

首页 > 解决方案 > 如何更改下拉菜单中的特定背景颜色

javascript - 如何更改下拉菜单中的特定背景颜色

问题描述

我正在创建一个下拉菜单或列表（不知道有什么区别），我想让它成为当有人选择他想要查看的内容并单击图像时，背景图像改变颜色，直到他会改变页面的内容时，他最终会点击其他图像来选择内容。我现在将在此处粘贴一些图像，让您了解我的意图。系统与背景颜色相同

现在页面显示系统的内容颜色改变了，即使用户点击内容固有的其他东西，颜色也不会改变

真诚地，我真的不知道什么代码可以帮助我解决这个问题，无论是 CSS 还是 javascript。我不会假装你像工人和老板一样回答我，当然不是，即使是简单的关于指导我的建议也可以。

{
    .system-rectangle{
        top: 180px;
        left: 0px;
        width: 120px;
        height: 120px;
        background: #405D6C 0% 0% no-repeat padding-box;
        opacity: 1;
    }

    .system-image{
        top: 194px;
        left: 25px;
        width: 70px;
        height: 56px;
        opacity: 1;
    }

    .system-text{
        top: 260px;
        left: 0px;
        width: 119px;
        height: 26px;
        text-align: center;
        font: Regular 16px/21px Oswald;
        letter-spacing: 0;
        color: #FFFFFF;
        opacity: 1;
    }

这是关于系统矩形背景、图像和文本的信息。如果您质疑为什么图像没有“背景”是因为我删除了它，因为它有个人信息。

标签： javascriptcss

解决方案

我想你想要一个 html、css 和 js 解决方案。

您可以给列表项一个活动类，然后在 css 中您将能够给它一个不同的背景。使用 JavaScript，您可以在单击项目时将项目的类更改为活动。

HTML：

<nav> 
  <ul>
    <li class="system-rectangle active" onclick="changeActive(this)">System</li>
    <li class="system-rectangle" onclick="changeActive(this)">Troubleshooting</li>
    <li class="system-rectangle" onclick="changeActive(this)">Other</li>
  </ul> 
</nav>

CSS：

.system-rectangle{
  top: 180px;
  left: 0px;
  width: 120px;
  height: 120px;
  background: #405D6C 0% 0% no-repeat padding-box;
  opacity: 1;
 }

.active{
  background-color: lightblue;
}

JS：

function changeActive(elem){
  document.getElementsByClassName("active")[0].classList.remove('active');
  elem.classList.add('active');
}

这只是一个例子。这段代码可以写得更好，但如果你提供你的代码，那么给出一个实际的例子会更容易。

您可以查看实际代码：Codepen

推荐阅读