0

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

Как сделать так, что бы ссылка меняла свой цвет (если она активная на данный момент)?

6
  • 1
    Дабы лучше понять, что Вы имеете в виду, приложите код.
    – Igor R.
    29 авг 2019 в 13:54
  • вот тут пример, jsbin.com/ezohic/1/edit?html,css,js,output, как сделать так что бы ссылка на которую мы кликнули на пример Malone выделилась красным?
    – user324611
    29 авг 2019 в 14:02
  • вот еще пример, если выбрали five то эта же ссылка подсветится howtomake.com.ua/demo/…
    – user324611
    29 авг 2019 в 14:10
  • у меня ссылки имеют вид <a href="#link">link</a> и ведет она на часть страницы к элементу с id="link"
    – user324611
    29 авг 2019 в 14:54
  • Посмотрите мой ответ, возможно он решит вашу задачу
    – Nilsan
    29 авг 2019 в 15:05

1 ответ 1

0

Немного мимо кассы, но с jQuery как-то так можно это сделать (вдруг кому-то пригодится)

$(".link").click(function() {
  event.preventDefault();
  let navEl = $(this);
  let scrollElement = $(this).attr("href");
  let scrollOffset = $(scrollElement).offset().top;
  if (!navEl.hasClass("active")) {
    $(".link").removeClass("active");
    navEl.addClass("active");
    $("html,body").animate({
      scrollTop: scrollOffset
    }, 1100);
  }
});
.nav {
  position: fixed;
  top: 0;
  background: white;
}

.link {
  border: 1px solid;
  background: grey;
}

.active {
  background: red;
}

.body div {
  height: 550px;
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <a href="#sec1" class="link active">sec1</a>
  <a href="#sec2" class="link">sec2</a>
  <a href="#sec3" class="link">sec3</a>
  <a href="#sec4" class="link">sec4</a>
</div>
<div class="body">
  <div id="sec1">sec1</div>
  <div id="sec2">sec2</div>
  <div id="sec3">sec3</div>
  <div id="sec4">sec4</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.