活动和点击菜单（<a> 标签）不更改 CSS（DIVI 网站）

Question

我使用 Divi 侧边栏模块创建了一个侧边栏小部件。 HTML & CSS 代码如下：

CSS：

.et_pb_sidebar_0.et_pb_widget_area {
    border:1px solid #A9A9A9;
}

.et_pb_sidebar_0.et_pb_widget_area .widgettitle {
    padding-left: 30px;
}

.our-work-side-menu ul li {
    box-sizing: border-box;
    margin: 0;
    border-top:1px solid #A9A9A9;
    width:100%;
    padding: 10px 0 10px 40px;
}

.our-work-side-menu ul li:hover {
    background-color: #529883;
}

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li a:hover {
    color: #ffffff;
    background-color: #529883;
}

.our-work-side-menu a:active {
    color: #ffffff;
    background-color: #529883;
}

HTML：

<div class="our-work-side-menu">
<ul >
    <li><a href="/our-work/completed-projects/">Completed Projects</a></li>
    <li><a href="/our-work/ongoing-projects/">Ongoing Projects</a></li>
    <li><a href="/our-work/future-projects/">Future Projects</a></li>
    <li><a href="/our-work/photo-gallery/">Photo Gallery</a></li>
    <li><a href="/our-work/video-center/">Video Center</a></li>
    <li><a href="/our-work/video-center/dr-asamoah-bio-video/">Dr. Asamoah Bio Video</a>    </li>
</ul>
</div>

divi sidebar preview

我无法获取活动链接/菜单项来更改其背景。 我还希望 Clicked Link 具有活动链接样式，并且其余链接保持不变。

Answer 1

Divi 主题将菜单类 current-menu-item 分配给所有活动的 li 即菜单项。使用 CSS 将其与特定侧边栏小部件的 id 一起定位。请看下面的例子：

#menu-blog-categories.menu .current-menu-item>a {
color: #fff !important; background-color: #293852; }

Answer 2

问题：您没有更改hover 和active 状态的背景颜色。见

.our-work-side-menu ul li:hover {
    background-color: #529883; /*Same Color */
}

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li a:hover { /* Repeated | Redundant CSS */
    color: #ffffff;
    background-color: #529883; /*Same Color */
}

.our-work-side-menu a:active {
    color: #ffffff;
    background-color: #529883; /*Same Color */
}

修复：

.et_pb_sidebar_0.et_pb_widget_area {
  border: 1px solid #a9a9a9;
}

.et_pb_sidebar_0.et_pb_widget_area .widgettitle {
  padding-left: 30px;
}

.our-work-side-menu ul li {
  box-sizing: border-box;
  margin: 0;
  border-top: 1px solid #a9a9a9;
  width: 100%;
}

.our-work-side-menu ul li a {
  color: #529883;
  display: block;
  height: 100%;
  text-decoration: none;
  padding: 10px 0 10px 40px;
}

.our-work-side-menu ul li a:hover {
  color: #ffffff;
  background-color: #529883;
}

.our-work-side-menu ul li a:active {
  color: #ffffff;
  background-color: orange;
}
 /* UPDATE: For clicked link behaviour we set an active class  */
 .active {
   background: orange;
   color: #ffffff !important;
 }

更新：

JAVASCRIPT：

要使 Clicked Link 具有活动样式，我们需要使用一些 CSS。我想出了这段代码（虽然）有很多方法:)

document.addEventListener("DOMContentLoaded", () => {
  let linksWrapper = document.querySelector(".links-wrapper");

  let hiddenLI = document.createElement("li");
  let anchor = document.createElement("a");
  anchor.setAttribute("class", "active");

  hiddenLI.appendChild(anchor);

  linksWrapper.appendChild(hiddenLI);
  hiddenLI.style.display = "none";

  const mainLinks = document.querySelectorAll(".links-wrapper li a");
  for (var i = 0; i < mainLinks.length; i++) {
    mainLinks[i].addEventListener("click", function () {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace("active", "");
      this.className = "active";
    });
  }
});

完整的工作代码：

document.addEventListener("DOMContentLoaded", () => {
  let linksWrapper = document.querySelector(".links-wrapper");

  let hiddenLI = document.createElement("li");
  let anchor = document.createElement("a");
  anchor.setAttribute("class", "active");

  hiddenLI.appendChild(anchor);

  linksWrapper.appendChild(hiddenLI);
  hiddenLI.style.display = "none";

  const mainLinks = document.querySelectorAll(".links-wrapper li a");
  for (var i = 0; i < mainLinks.length; i++) {
    mainLinks[i].addEventListener("click", function () {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace("active", "");
      this.className = "active";
    });
  }
});

.et_pb_sidebar_0.et_pb_widget_area {
  border: 1px solid #a9a9a9;
}

.et_pb_sidebar_0.et_pb_widget_area .widgettitle {
  padding-left: 30px;
}

.our-work-side-menu ul li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  border-top: 1px solid #a9a9a9;
  width: 100%;
}

.our-work-side-menu ul li a {
  color: #529883;
  display: block;
  height: 100%;
  text-decoration: none;
  padding: 10px 0 10px 40px;
}

.our-work-side-menu ul li a:hover {
  color: #ffffff;
  background-color: #529883;
}

.our-work-side-menu ul li a:active {
  color: #ffffff;
  background-color: orange;
}

.active {
  background: orange;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="our-work-side-menu">
      <ul class="links-wrapper">
        <li><a href="#">Completed Projects</a></li>
        <li><a href="#">Ongoing Projects</a></li>
        <li><a href="#">Future Projects</a></li>
        <li><a href="#">Photo Gallery</a></li>
        <li><a href="#">Video Center</a></li>
        <li>
          <a href="#">Dr. Asamoah Bio Video</a>
        </li>
      </ul>
    </div>
  </body>

  <script src="./script.js"></script>
</html>

Answer 3

那是因为您用于不同声明的所有颜色代码都是相同的

.our-work-side-menu ul li:hover {
    background-color: #529883;
}

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li a:hover {
    color: #ffffff;
    background-color: #529883;
}

.our-work-side-menu a:active {
    color: #ffffff;
    background-color: #529883;
}

您似乎想反转悬停和活动菜单项的颜色，所以我的建议是您的代码应如下所示

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li:hover,
.our-work-side-menu ul li.active {
    background-color: #529883;
}

.our-work-side-menu ul li:hover a,
.our-work-side-menu ul li.active a{
    color: #ffffff;
}

$(document).ready(function () {
    $('.our-work-side-menu ul li').click(function(e) {

        $('.our-work-side-menu ul li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});

.our-work-side-menu ul li {
  box-sizing: border-box;
  margin: 0;
  border-top: 1px solid #a9a9a9;
  width: 100%;
  padding: 10px 0 10px 40px;
}
.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li:hover,
.our-work-side-menu ul li.active {
    background-color: #529883;
}

.our-work-side-menu ul li:hover a,
.our-work-side-menu ul li.active a{
    color: #ffffff;
}

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>

      <body>
        <div class="our-work-side-menu">
          <ul>
            <li><a href="#">Completed Projects</a></li>
            <li><a href="#">Ongoing Projects</a></li>
            <li class="active"><a href="#">Future Projects</a></li>
            <li><a href="#">Photo Gallery</a></li>
            <li><a href="#">Video Center</a></li>
            <li>
              <a href="#">Dr. Asamoah Bio Video</a>
            </li>
          </ul>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </body>

    </html>

Answer 4

您写道，您'Gave it class "#ghana-work-sidebar" '，但您的 CSS 代码旨在更改 ID。 尝试将 ID 分配给 HTML 代码中的元素，如下所示：

<div id="ghana-work-sidebar"></div>