Активное и кликнутое меню (тег <a>), не меняющее CSS (веб-сайт DIVI)
Я создал виджет боковой панели, используя модуль боковой панели 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
Я не могу заставить активную ссылку/элемент меню изменить свой фон. Я также хочу, чтобы выбранная ссылка имела активный стиль ссылки, а остальные ссылки оставались прежними.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы написали, что «присвоили ему класс «#ghana-work-sidebar»», но ваш код CSS предназначен для изменения идентификатора. Вместо этого попробуйте присвоить идентификатор вашему элементу в HTML-коде следующим образом:
<div id = "ghana-work-sidebar"></div>
В этом случае ваш код CSS правильный. Если оно по-прежнему не работает, ваше правило перезаписывается другими конфликтующими правилами. Подробнее о каскаде CSS читайте здесь: developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/…
Попробуйте изменить ".our-work-side-menu a:active" на ".our-work-side-menu ul li a:active"
Мне не нужен код javascript, чтобы это произошло, не так ли?
Не нужен Javascript, только чистый CSS!
Проблемы : Вы не изменили цвет фона в штатах 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;
}
ОБНОВЛЯТЬ :
ЯВАСКРИПТ:
Чтобы 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>Спасибо Имран за указание на это. Я изменил цвет, но когда страница активна, фон ссылки не остается в желаемом цвете. Он показывает то же, что и неактивные ссылки/пункты меню. Для активной ссылки я хочу, чтобы текст был белым, а фон зеленым.
Я также обновил некоторые CSS. Из-за проблемы специфики он не приходил. Последний селектор CSS .our-work-side-menu ul li a:active { color: #ffffff; цвет фона: оранжевый; } Если вы нажмете кнопку «Выполнить фрагмент кода» внизу моего ответа. Есть рабочий код. Активный эффект есть. Однако, если вам нужно сделать активным весь ли, я также могу помочь с этим. Проверить один раз
Да, это то, что я хочу. Весь li должен быть в активном режиме, а цвет его фона должен оставаться зеленым, пока страница открыта, а текст ссылки белым.
Я обновил код. и это сделано!!! И у вас есть свой функционал Друг. Примите ответ и проголосуйте также за то, чтобы и задавший вопрос, и отвечающий получили пользу :) Да благословит Бог :)
Просто нажмите кнопку «Выполнить фрагмент кода». И вы увидите, как это работает. Позвольте мне также проголосовать за улучшение вашей репутации, небольшой подарок от меня. :) Удачного кодирования
Я попробовал код, он работает при наведении курсора, но активная ссылка не имеет другого цвета (оранжевый), чем другие неактивные ссылки. Нужно ли для этого использовать javascript? Чтобы узнать, чего я пытаюсь достичь, посетите ghanaministries.com/our-work/completed-projects и посмотрите на боковую панель.
Подожди, сделай одну вещь. Напишите !важно в конце. .our-work-side-menu ul li a:active { color: #ffffff !important; цвет фона: оранжевый !важно; }
А пока позвольте мне посмотреть, чего вы на самом деле хотите. Поскольку активное состояние означает состояние, когда пользователь удерживает щелчок мыши, когда пользователь покидает его, оно больше не остается активным. Может быть, вы хотите, чтобы ссылка, по которой вы щелкнули, оставалась оранжевой.
Да, я хочу, чтобы ссылка, по которой щелкнули, оставалась оранжевой. Как мне этого добиться?
Давайте продолжим обсуждение в чате.
Это потому, что все цветовые коды, которые вы использовали для разных объявлений, одинаковы.
.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>Как динамически изменить этот «активный» класс при изменении ссылки. Я получаю статический эффект.
Просто нашел решение здесь: stackoverflow.com/q/17975922/1889652
Также добавлен код фрагмента выше, вы можете проверить его
Если это то, что вы ищете, просто отметьте это как ответ на вопрос или просто проголосуйте за него. :)
Тема Divi присваивает класс меню current-menu-item всем активным li элементам меню. Нацельтесь на это вместе с идентификатором конкретного виджета боковой панели с помощью CSS. См. пример ниже:
#menu-blog-categories.menu .current-menu-item>a {
color: #fff !important; background-color: #293852; }
Привет Мориц, спасибо за вклад. Я обновил вопрос. Удален конфликт класса и идентификатора, но я не могу заставить активный элемент меню изменить свой цвет.