Как изменить свойство отображения CSS с помощью метки привязки?

Question

У меня есть страница, в которой есть якорная бирка: <a href="tut.html#div2">jump to div2</a>.

Этот якорь тег открывает tut.html, который имеет div с id=div2:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
      <div id="div1"> 
       --some content-- 
      </div> 
      <div id="div2" style="display:none;"> 
       --some content-- 
      </div> 
     </div> 
    </div> 
</div> 

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

Answer 1

Вы можете легко проверить hash, который передается в и использовать, чтобы отобразить соответствующий блок:

window.onload = function(){ 
    var element = document.querySelector(location.hash); 
    if(element) element.style.display = "block"; 
} 

Answer 2

ваш HREF ссылка не должна содержать ссылку на страницу, только на якорь:

<a class="myButton" href="#div2">link</a> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
      <div id="div1"> 
       --some content-- 
      </div> 
      <div id="div2" style="display:none;"> 
       --some content-- 
      </div> 
     </div> 
    </div> 
</div> 

Использование JQuery, вы должны иметь функцию в нижней части документа, который будет обрабатывать ваш щелчок, как это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
<script> 
    $(function() { 
     $('a.myButton').on('click', function(event){ 
      event.preventDefault(); 
      $('div2').fadeIn('slow'); 
      return false; 
     }) 
    }); 
</script> 

Answer 3

Если ссылка идет на новую страницу:

<a href="tut.html#div2">link</a> 

В нижней части новой страницы «tut.html»:

<script> 
    $(function() { 
    var hash = window.location.hash; 
    if(hash == '#div2') $(hash).fadeIn('slow'); 
    }); 
</script>