2016-11-23 10 views
1

カスタムURLを使用した内部ページナビゲーションを探しています。 私のコードを参照してください。カスタムURLを使用した内部ページナビゲーション

現在のコード:

<ul class="mdl-menu"> 
     <li class="mdl-menu__item"><a href="#" class="navText nav_link">Home</a></li> 
     <li class="mdl-menu__item"><a href="#About" class="navText nav_link">About</a></li> 
     <li class="mdl-menu__item"><a href="#LightUp" class="navText nav_link">Light Up</a></li> 
     <li class="mdl-menu__item"><a href="#Events" class="navText nav_link">Events</a></li> 
     <li class="mdl-menu__item"><a href="#SignUp" class="navText nav_link">Sign up</a></li> 
     <li class="mdl-menu__item"><a href="#NCFMix" class="navText nav_link">NCF Mix</a></li> 
     <li class="mdl-menu__item"><a href="#LightUpNCF" class="navText nav_link">#LightUpNCF</a></li> 
     </ul> 

電流出力: メインURL:"www.example.com/php/home.php"

私は2番目のメニューボタンをクリックし、「を意味し、 「」についてそれは次のURLで目的のブロックにナビゲートします。 "www.example.com/php/home.php#About" 私は期待し何

"www.example.com/About"または"www.example.com/#About"

です

私も試しましたwindow.history.pushState('', '','/About'); これは私が望むようにURLを変更しますが、同じページを更新すると404エラーが表示されます。 これを手伝ってください。 JavaScriptやPhPを使ってこれを実装する方法はありますか?

ありがとうございます。

+0

URLは、ディレクトリパスのようなものです。 Javascriptで表示されるようにすることはできますが、実際に使用するとすぐに** About **についての404エラーが発生し、インデックスファイルが検索されます。この問題を解決するために私が知っている唯一の(そして最良の)オプションは、.htaccessファイルの** mod_rewrite **です。ここでこれを使用する方法に関する詳細なチュートリアルを見つけることができます:https://code.tutsplus.com/tutorials/an-in-depth-guide-to-mod_rewrite-for-apache--net-6708 – icecub

答えて

0

これがホームディレクトリである場合、あなたはまた、これはあなたがチェックしてくださいに役立つ次のようなルール

RewriteRule^home.php [QSA,L] 
+0

'オプション-Indexes' - ファイルのリスト表示を防ぎます 'DirectoryIndex home.php' - home.phpをインデックスファイルに設定します。 'order deny、allow' - この場合は何もしません。結論:このソリューションは完全に無意味であり、質問に全く答えません。 'RewriteRule^home.php [QSA、L]' - 基本的にすべてを単純な* home.php *に書き換えますが、これはまったく問題ではありません。また、Apache内部でmod_rewriteが有効になっている必要があります。結論:正しい方向ですが、答えはありません。 – icecub

0

を追加することができます.htaccessファイルを作成し、この

Options -Indexes 
DirectoryIndex home.php  
order deny,allow 

を書く:

ハッシュバング(#!)、ハッシュ(#)、そしてHTML5履歴API(pushState、popState)さえも問題があります。この記事では、それぞれの問題、そのユースケース、そしてソリューションの進化について説明します。少しでも教育を受けたシンプルさで、より良い結果を達成することができます。ユーザーにとってより良いエクスペリエンスを提供するだけでなく、ソリューションの互換性、アクセシビリティ、保守性を向上させることができます。

Reference Link

関連する問題