Перейти к скрытому разделу на той же странице

У меня есть 3 группы контента на странице, которая может перемещаться по вкладкам. При входе на страницу отображается вкладка по умолчанию, а затем я могу щелкнуть вкладки, чтобы скрыть текущее содержимое и показать другое.

образец.формат html

<a href="example" name="example" class="tab active">Example</a> // default
<a href="about" name="about" class="tab">About</a>
<a href="contact" name="contact" class="tab">...</a>

...

<div class="example visible" id="example">...</div> // default visible content
<div class="about" id="about">...</div>
<div class="contact" id="contact">...</div>

Теперь я добавил нижний колонтитул, где есть ссылки, соединяющие с 3 вкладками. Так, если я нахожусь в другой части сайта, то могу кликнуть по ссылке, скажем, обо мне , что бы перейти к примеру.html и сразу в раздел про меня .

нижняя сноска.формат html

<ul>
   <li><a href="/example">Example</a></li>
   <li><a href="/example#about">Example About</a></li>
   <li><a href="/example#contact">Example Contact</a></li>
</ul>

Вышеуказанное работает совершенно отлично. Но вот проблема, когда я нажимаю на ссылки нижнего колонтитула, когда я на примере.html, он переходит в положение содержимого, но его нельзя увидеть, потому что текущая вкладка все еще активна. Есть ли способ проверить url всякий раз, когда он меняется, чтобы я мог разобрать его и изменить активную вкладку на его основе?

JS

$(document).ready(function() {
// find which footer link was clicked; doesn't work when navigating on the same page
  var hash = window.location.href.slice(window.location.href.indexOf('#') + 1);

if(hash === "foundation") {
     $("a[name='foundation']").addClass("active").siblings().removeClass("
active");
     $(".foundation").addClass("visible").siblings().removeClass("visible");
}
else if(hash === "credits") {...}
...



// click event for tabs
  $("a").on("click", function(event) {
    event.preventDefault();
    $(this).addClass("active").siblings().removeClass("active");
    var currentAttrVal = $(this).attr("href");
    $("." + currentAttrVal).addClass("visible").siblings().removeClass("visible");
  });
});

Я знаю, что сценарий слишком повторяющийся, но я все переделаю, как только разберусь с этим!

2 ответа

  1. объект location имеет собственное свойство для текущего хэша

    window.location.hash

    это включает в себя знак хэша тоже так что вам нужно

    window.location.hash.slice(1)

    Для прослушивания изменения хэша вам придется использовать onhashchangeсобытие

    Можно использовать один из следующих методов

    window.onhashchange = funcRef;  
    

    или

    window.addEventListener("hashchange", funcRef, false);
    

    Этот способ используется в рамках, таких как angular, когда они используют #! способ определения маршрутов для браузеров, не поддерживающих History API

    Подробнее об этом можно прочитать в MDN

  2. Вот концепция, которая, я думаю, может помочь вам: (версия jsfiddle)

    нижняя сноска.формат html

    <ul>
      <li>
        <input type="button" class="navigateButton" value="example" onclick="navigate(value)">
      </li>
      <li>
        <input type="button" class="navigateButton" value="About" onclick="navigate(value)">
      </li>
      <li>
        <input type="button" class="navigateButton" value="Contact" onclick="navigate(value)">
      </li>
    </ul>
    

    стиль CSS

    .navigateButton {
      background: none!important;
      border: none;
      padding: 0!important;
      font: inherit;
      /*border is optional*/
      border-bottom: 1px solid #444;
      cursor: pointer;
    }
    

    JS

    var navigate = function (value) {
    
      switch (value) {
        case "example":
        //select appropriate tab here
          window.location.replace('/example');
          break;
        case "About":
        //select appropriate tab here
          window.location.replace('/example#About');
          break;      
        case "Contact":
        //select appropriate tab here
        window.location.replace('/example#Contact');
        break;
        default:
          alert('Unknown type');
      }
    }