Отображение контента на основе якорей URL

Question

У меня есть ссылки, которые ведут на другую страницу с другим содержанием.

<ul class="menu">
   <li><a href="/services#item1" class="menu-btn">Item 1</a></li>
   <li><a href="/services#item2" class="menu-btn">Item 2</a></li>
   <li><a href="/services#item3" class="menu-btn">Item 3</a></li>
</ul>

Этот код на странице /services:

<div class="menu-content item-1">Content item 1</div>
<div class="menu-content item-2">Content item 2</div>
<div class="menu-content item-3">Content item 3</div>

Я нашел ниже JS , но работает только при нажатии на ссылку привязки на той же странице.

var $content = $('.menu-content');

function showContent(type) {
$content.hide().filter('.' + type).show();
}

$('.menu').on('click', '.menu-btn', function(e) {
   showContent(e.currentTarget.hash.slice(1));
   e.preventDefault();
}); 

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

Answer 1

Как только вы измените страницу на веб-сайтах (не одностраничных приложениях), javascript «забудет» о том, что вы сделали ранее.

Так что для работы вашей логики c она не может быть внутри событие клика, которое произошло на другой странице. Он должен быть внутри функции document.ready или window.onload.

Вы можете использовать location.hash, чтобы получить привязку # от вашего URL.

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

$(document).ready(function() {

  location.hash = "item1"; // skip this
  const myHash = location.hash.substr(1)
  $('.menu-content').hide().filter(`.${myHash}`).show();
  // or use : $('.menu-content').not(`.${myHash}`).hide()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-content item1">Item 1</div>
<div class="menu-content item2">Item 2</div>