Блог

Главная - Вопросы по программированию - Почему мои элементы возвращаются к своему цвету по умолчанию после нажатия на них

Почему мои элементы возвращаются к своему цвету по умолчанию после нажатия на них

#jquery

Вопрос:

Я новичок в Jquery и пытаюсь создать onClick функцию, которая должна изменять цвет элемента, например, на желтый.

Это прекрасно работает для h1 элементов, но a элементы просто мигают желтым цветом при нажатии, и они возвращаются к своему цвету по умолчанию. Я попытался обыскать его сам, но ничего не нашел.

 var containerUp = $('.upperside-shit');
var buttons = containerUp.find("a");
var nadpis = containerUp.find("h1")
console.log(buttons.length);

buttons.click(function() {
  $(this).css("color", "yellow");
});

nadpis.click(function() {
  $(this).css("color", "yellow");
}) 
 .upperside-shit ul,
.upperside-shit h1,
.icons,
.upperside-shit ul li a {
  float: left;
  text-decoration: none;
}

.upperside-shit ul,
.icons,
.upperside-shit h1 {
  width: 31.75%;
  margin-top: 20px;
  text-align: center;
}

.icons {
  margin-left: 50px;
  text-align: right;
}

.icons i {
  font-size: 25px;
}

.icons i:last-child {
  margin-right: 50px;
}

.upperside-shit ul,
.upperside-shit ul li {
  list-style: none;
}

.upperside-shit a {
  margin: 0 10px;
  text-decoration: none;
}

.categories li a {
  margin: 0 15px;
}

.upperside-shit ul li a:first-child {
  margin-left: 0;
} 
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="upperside-shit clearfix">
  <ul class="clearfix">
    <li><a href="">Woman</a></li>
    <li><a href="">Men</a></li>
    <li><a href="">Children</a></li>
  </ul>
  <h1>Headline</h1>
  <div class="icons">
    <i class="fas fa-search"></i>
    <i class="fas fa-user"></i>
    <i class="fas fa-heart"></i>
    <i class="fas fa-shopping-bag"></i>
  </div>

  <ul class="categories clearfix">
    <li><a href="">Button </a></li>
    <li><a href="">Button </a></li>
    <li><a href="">Button </a></li>
    <li><a href="">Button </a></li>
    <li><a href="">Button </a></li>
    <li><a href="">Button </a></li>
    <li><a href="">Button </a></li>
  </ul>
</div>

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

1.Ваши ссылки <a> переходят на их href — который, оказывается href="" , так перезагружает страницу. Удалите href="" или добавьте return false; в свой обработчик событий click или используйте preventDefault

2. Если вы не собираетесь <a> никуда связываться (т. е. Перемещаться), и они на самом деле являются «кнопками» (как в вашем коде), вместо этого используйте <button type='button >`; по соображениям доступности. Вы можете использовать css для стилизации кнопки, чтобы она выглядела как ссылка.

3. @freedomn-m Да, так что в основном мне нужно использовать какое-то локальное хранилище или какой-то внутренний метод, чтобы сохранить этот css, чтобы он не вернулся к значению по умолчанию. Большое спасибо!

4. @milderengen Нет, @freedomn-m говорит, что вы должны использовать <button> тег вместо <a> тега (и стилизовать его в своем CSS, как любой другой элемент), что предотвратит <a> повторную загрузку страницы при нажатии на тег.

5. Зависит от того, ожидаете ли вы, что они останутся такого цвета, когда вы намеренно перезагрузите страницу.

Ответ №1:

Вам необходимо использовать функцию preventDefault , которая отключит собственное поведение элемента

 buttons.click(function(e) {
  e.preventDefault()
  $(this).css("color", "yellow");
});
Метки: