Выделите текущую вкладку навигации на основе URL или подкаталога

Question

Я создал вертикальную навигацию слева от нашего сайта.Мы бы хотели, чтобы цвет фона для .item менялся в зависимости от подкаталога, где пользователь просматривает контент.Поэтому, если кто-то нажимает навигацию .item, href перенаправит их на страницу, и мы хотим, чтобы .item выделил уникальный шестнадцатеричный цвет, который мы можем настроить для каждой навигации .item.Все 6 элементов навигации будут иметь разные цвета.

Одно замечание: иногда люди могут посещать наш сайт, даже не щелкнув по элементу навигации.Я хочу, чтобы элементы навигации по-прежнему выделялись в зависимости от текущего подкаталога, в котором пользователь просматривает контент.Это помогает им легко определить, где они находятся и как вернуться, если они перейдут в другие части сообщества.Также, если человек выполняет глобальный поиск и сталкивается с контентом в одной из наших 6 основных областей, мы хотим, чтобы навигационное меню мгновенно идентифицировало его текущее местоположение (на основе URL-адреса) и выделило эту навигацию .item в нашей вертикальной навигационной панели.

Является ли Javascript или Jquery подходящим способом?Мы будем благодарны за любую помощь !!

Вот FIDDLE со всем кодом.

пример CSS:

.navback {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100px;
  height: 100%;
  background: #283237;
  z-index: 4;
}

.navbar {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100px;
  height: 60vh;
  background: #283237;
  display: flex;
  z-index: 5;
  flex-direction: column;
}

.topbar {
  border-top: 1px solid #000;
  top: 44px;
}

.navbar .item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 40px;
  max-height: 100px;
  z-index: 5;
}

.navbar .item div.label {
  color: #fff;
  position: relative;
  top: 5px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  left: -100px;
}

Пример HTML:

 <div class="topbar"></div>
  <div class="navback leftnav">
<div class="navbar">
  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/">
    <div>
        <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
      <div class="label">Home</div>
    </div>
  </a>
  </div>

  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/community-central/">
    <div>
      <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
      <div class="label">Central</div>
    </div>
  </a>
  </div>

Answer 1

JS / jQuery

// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";

// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;

$(".item")
    .find("[href^='" + hereUrl + "']")
        .closest(".item").addClass("here");

Примечание .find("[href^=...]") выбирает то, что начинается с того, что вы ищете.

CSS

/* now use .here to style */
.item.here {
    background-color: purple;
}
.item.here .label {
    font-weight: bold;
}

Answer 2

Чтобы ответить на ваш вопрос напрямую, да, это можно сделать также с помощью JavaScript / jQuery, но есть гораздо более простой способ использования селектора css :active.

Например, если пользователь нажимает .item тогда код будет:

.item:active {
   background-color: #cecece; // or whatever styling you want
}

Sidenote: Как веб-дизайнер, я бы вообще советовал использовать селектор :hover, когда дело доходит до подсветки навигационной панели вместо :activeодин.

Answer 3

Если вы используете jQuery, вы можете циклически проходить через каждый якорь и проверять его по текущему URL-адресу страницы следующим образом:

$(function highlightCurrentUrl() {
  var currentUrl = window.location.href;
  var items = $(".item").each(function() {
    var anchor = $(this).find('a');
    $(this).removeClass('active');

    //comparison logic
    if (anchor.prop('href') == currentUrl) {
      $(this).addClass("active");
    }

  });
});

Для этого нужно добавить класс в соответствующий .item вменю.(Это не сработает в JSFiddle из-за политики безопасности содержимого, поэтому вам придется протестировать ее в собственной среде.)

Далее вам необходимо определить стили, которые будут применяться к .item.active DIVтег.И, если вы хотите использовать разные цвета для разных предметов, вам, вероятно, следует указать их идентификаторы в разметке, чтобы вы могли ссылаться на них по отдельности:

  <div class="item hvr-shrink" id="home-link">
    <a href="https://community.canopytax.com/">
      <div>
        <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
        <div class="label">Home</div>
      </div>
    </a>
  </div>

  <div class="item hvr-shrink" id="central-link">
    <a href="https://community.canopytax.com/community-central/">
      <div>
        <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
        <div class="label">Central</div>
      </div>
    </a>
  </div>

Эти правила говорят, что при добавлении класса activeк div с идентификатором home-link или central-link он должен иметь следующие свойства

#home-link.active {
  background-color: blue;
}
#central-link.active {
  background-color: green;
}

Answer 4

Используйте jquery в вашем html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)

Добавьте следующий скрипт

$('.item').click(function(){
    $('.item.active').removeClass("active");
    $(this).addClass('active');
})

CSS

.item.active {
  background-color: red;
}

Пожалуйста, смотрите обновленный fiddle