＃urlセクションhideとshow

Question

こんにちは私は＃セクションで簡単なシングルページのウェブサイトを持っています。 ＃セクションを隠して表示するために＃を使用しています。

たとえば、 someurl/index.html/#sectionOne "sectionOne" idを持つdivがあるので、関連するセクションを表示できます。

私の質問は、予防または＃ように、URLに「/」パス文字を交換する方法があります。

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

それは当然の404を与えるので。 私はbeforeunload、load on window、load on bodyを試しましたが、これらは私の問題を解決しませんでした。

これは私が正しく理解していれば、target疑似クラスは、ここで使用することができ、簡単な例

$(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

です：

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です。