jQuery Выделите элемент Nav при загрузке - PullRequest
Новая
       6

jQuery Выделите элемент Nav при загрузке

0 голосов
/ 08 октября 2018

Я новичок в HTML / CSS / JS, и я провожу некоторое тестирование и возиться с вещами и решил выделить элемент навигации, когда на этой странице.Я решил использовать jQuery для этого, потому что из того, что я прочитал, это было самое простое решение.До сих пор он работал отлично, но моя проблема в том, что он не выделяет главную страницу чата при загрузке, потому что это просто URL, без /index.html.Буду признателен за помощь в том, как заставить его добавить активный класс к элементу index.html при загрузке.

HTML: 

 <aside>
        <nav>
            <ul>
                <li><a href="/index.html">Chat</a></li>
                <li><a href="/friends.html">Friends</a></li>
                <li><a href="/settings.html">Settings</a></li>
            </ul>
        </nav>
    </aside>

JQuery: 

jQuery(function($) {
    var path = window.location.href; 
    $('aside nav ul li a').each(function() {
    if (this.href === path) {
    $(this).addClass('active');
    }
});

SCSS: 

  .active {
        border-right: 10px solid $accent-two;                                 
  }

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

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

jQuery(function($) {
  var path = window.location.pathname;
  var page = path.split("/").pop();
  // 
  // The line below is for demo on stackoverflow purposes
  $("#forDemoOnStackPurpose").attr("href", page);
  //
  $('aside nav ul li a').each(function() {
    if ($(this).attr("href") === page) {
      $(this).addClass('active');
    }
  });
});
.active {
  border-right: 10px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
  <nav>
    <ul>
      <li><a id="forDemoOnStackPurpose" href="">This test page</a></li>
      <li><a href="index.html">Chat</a></li>
      <li><a href="friends.html">Friends</a></li>
      <li><a href="settings.html">Settings</a></li>
    </ul>
  </nav>
</aside>
0 голосов
/ 08 октября 2018

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

$(document).ready(function()
{
    // Simulate change on "windows.location.href"
    //===========================================================

    var paths = ["/index.html","/friends.html","/settings.html"];
    var idx = Math.floor(Math.random() * 3) + 0;
    console.log("Random idx = " + idx);

    //===========================================================

    var path = paths[idx];
    //var path = window.location.href;

    $("a").removeClass('active');
    $("a[href='" + path + "']").addClass('active');
});
.active {
    border-right: 10px solid blue;                                 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<aside>
    <nav>
        <ul>
            <li><a href="/index.html">Chat</a></li>
            <li><a href="/friends.html">Friends</a></li>
            <li><a href="/settings.html">Settings</a></li>
        </ul>
    </nav>
</aside>
...