Блог

Главная - Вопросы по программированию - Как реализовать изменение цвета меню после того, как оно было выбрано или сфокусировано на

Как реализовать изменение цвета меню после того, как оно было выбрано или сфокусировано на

#html #css

#HTML #css

Вопрос:

 li a:hover {
  background-color: #111;
  text-transform: lowercase;
}

li a:focus {
  background-color: green;
} 
 <ul>
  <li> <a tabindex=0 href="home.html"> Home</a></li>
  <li> <a tabindex=0 href="about.html"> About us</a></li>
  <li> <a tabindex=0 href="contact.html"> Contact us</a></li>
  <li> <a tabindex=0 href="products.html">Products</a></li>
  <li> <a tabindex=0 href="services.html"> Services</a></li>
</ul>

Я пытался изменить цвет элемента меню после его нажатия, чтобы пользователь мог знать, на какой странице он находится, но мне это не удалось. Я попробовал несколько методов, которые я получил через поиск в Google, но это дает мне тот же результат: когда я нажимаю на мышь, она меняется, но сразу же, как я ее отпускаю, цвет / цвет фона возвращается к прежнему цвету.

Комментарии:

1. вы не можете сделать это только с помощью CSS. попробуйте некоторые решения javascript, чтобы добавить «активный» класс к выбранному элементу и стилизовать этот класс в CSS

2. Это потому, что страница перенаправляется на новый URL. Нажмите меню и отпустите его вне меню, вы увидите цвет фокуса, поскольку вы находитесь на той же странице

3. Все еще пытаюсь обойти это, но спасибо.

Ответ №1:

Вы можете использовать JavaScript для добавления активного класса к вашему элементу. Вот пример с jQuery, но вы можете сделать это с помощью чистого JavaScript.

 var $link_menu = $('ul li a');
$link_menu.on('click', function() {
  // When you click on a link on your menu, it removes all the active class
  $link_menu.removeClass('active');
  // Add an active class on the selected element
  $(this).addClass('active');
}); 
 .active {
  color: red;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li> <a tabindex=0 href="#"> Home</a></li>
  <li> <a tabindex=0 href="#"> About us</a></li>
  <li> <a tabindex=0 href="#"> Contact us</a></li>
  <li> <a tabindex=0 href="#">Products</a></li>
  <li> <a tabindex=0 href="#"> Services</a></li>
</ul>

Этот пример может помочь вам понять логику. Но вы должны адаптировать его, если ваши ссылки перенаправляют на новый URL.

В этом случае, когда вы загружаете новую страницу, весь код на текущей странице исчезает, и все имеющиеся у вас скрипты снова запускаются на новой странице.

Этот код не тестируется, поскольку мне нужно открыть новую страницу, но вы можете изучить его, чтобы понять :

 var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
})

Вам нужно сравнить URL-адрес страницы с URL-адресами ссылок при загрузке страницы.

Комментарии:

1. Спасибо, но я еще ничего не знаю о jQuery. Я всего 2 недели в HTML и JS

2. @davejimm Хорошо, итак, что вам нужно знать: я считаю, что это невозможно только с помощью HTML / CSS. Вам придется использовать JavaScript или jQuery (цель jQuery — упростить использование JavaScript). Я не могу вам больше помочь, потому что вам нужно изучить JS, чтобы понять. В stackoverflow вы найдете много людей, которые любят помогать, но вам нужно уметь понимать ответы.

Ответ №2:

Вы могли бы сделать это с помощью js и присвоить выбранному элементу атрибут data-atrribute, очистив остальные атрибуты. В вашем css вы присваиваете элементу, который имеет этот атрибут, указанный цвет фона

CSS

 li[data-active=true]{
/*do stuff*/
}
li[data-active=false]{
/*reset colors*/
}

JS

 //assuming you use jQuery, but you can easily translate it to native javaScript

$("li").click(function(){
    $("li").attr("data-active", "false")//reset all
    $(this).attr("data-active", "true")// set attr to the one clicked
})
//pure javaScript

let b= document.querySelectorAll("li")
for (a in b){
a.addEvenetListener("click", function(){
    let b= document.querySelectorAll("li")
for (a in b){ a.dataActive,="false"}//reset all
    this.dataActive="true"// set attr to the one clicked
})
}

Комментарии:

1. Спасибо, но я новичок; не знаю jQuery.

Метки: