# url section hide and show

Question

Привет, у меня есть простой сайт с одной страницей с # разделами. Я использую #, чтобы скрывать и показывать разделы.

Например, someurl/index.html/#sectionOne Существует div с идентификатором «sectionOne», поэтому я могу показать связанный раздел.

Мой вопрос, есть ли способ, чтобы предотвратить или заменить «/» путь символа в URL с # как;

someurl/index.html/sectionOne -> someurl/index.html/#sectionOne

Потому что это дает 404 конечно. Я попробовал beforeunload, окно на загрузку, тело при загрузке, но это не решило мою проблему.

Это простой пример

$(document).ready(function() { 
 
    window.onload = function(event) { 
 
     var hash = "about"; 
 
     $("section").hide(); 
 
     $("#" + hash).show(); 
 
    }; 
 

 
    $(".nav").click(function() { 
 
     console.log("CLICK"); 
 
     var hash = $(this).attr('href').substring(1); 
 
     console.log(hash); 
 
     $("section").hide(); 
 
     $("#" + hash).show(); 
 
    }); 
 
});

section {display: none;}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a class="nav" href="#about">ABOUT</a></li> 
 
    <li><a class="nav" href="#services">SERVICES</a></li> 
 
    <li><a class="nav" href="#contact">CONTACT</a></li> 
 
</ul> 
 

 
<section id="about"> 
 
    <h1>ABOUT</h1> 
 
    <p>About section</p> 
 
</section> 
 

 
<section id="services"> 
 
    <h1>SERVICES</h1> 
 
    <p>Services section</p> 
 
</section> 
 

 
<section id="contact"> 
 
    <h1>CONTACT</h1> 
 
    <p>Contact section</p> 
 
</section>

Answer 1

Если я правильно понимаю, target псевдо-класс может быть использован здесь:

section { 
 
    display: none; 
 
} 
 
#about:target, 
 
#services:target, 
 
#contact:target { 
 
    display: block; 
 
}

<ul> 
 
    <li><a class="nav" href="#about">ABOUT</a> 
 
    </li> 
 
    <li><a class="nav" href="#services">SERVICES</a> 
 
    </li> 
 
    <li><a class="nav" href="#contact">CONTACT</a> 
 
    </li> 
 
</ul> 
 

 
<section id="about"> 
 
    <h1>ABOUT</h1> 
 
    <p>About section</p> 
 
</section> 
 

 
<section id="services"> 
 
    <h1>SERVICES</h1> 
 
    <p>Services section</p> 
 
</section> 
 

 
<section id="contact"> 
 
    <h1>CONTACT</h1> 
 
    <p>Contact section</p> 
 
</section>

---

Что касается предотвращения пользователя от навигации прочь с помощью / (пусть это будет что-нибудь), я считаю, что не существует простой способ сделать из только стороне клиента.

Мы могли бы использовать событие window.onbeforeunload и разрешить диалоговое окно, которое будет отображаться, чтобы пользователь находился на основании того, хотят они или нет.

Другой вариант, который я вижу, заключается в использовании React Router for client-side 404.