Webページにおけるページ内のコンテンツ遷移についてのご相談

###前提・実現したいこと
オリジナルゲームのWebページを作成しております。
HTML、CSS等を使用し基本的なWebページの大枠は完成したのですが
ページ内のコンテンツの遷移にJavaScriptを使用したいという事になり悩んでおります。

下記のサイトのようにヘッダー・フッターは固定にてページ内のコンテンツを遷移
させたいと思っております。
https://another-eden.jp/world/index.html
現在実現に向けて情報収集をおこなっておりますが、いかんせんJavaScriptは初心であるため
どこから手をつけてよいかわからずも、JavaScriptの基本的な部分からフレームワークの使用
等も視野に入れて検討し進めております。
Jqueryのスライダーのプラグインでスライドショーのようにする事も考えているのですが
上記に乗せたサイトのように遷移させるとなると、プラグインのスライダーなどとは若干違うものなのかなと思います。

技術的なご質問ではないので、大変恐縮でございますが。
アドバイスやヒント、考え方等、なんでも構いませんので諸先輩方からのご助言を頂けると幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

ヘッダのボタンを押した際に、pjaxというものを使って画面遷移しています。画面全体を読み直すのではなく、ここでは<main id="contsWrap">内だけが切り替わるようになっているようです。

pjaxについてはこちらのページなどを参考に調べてみてください。

高速かつスムーズなページ遷移を実現する pjax 覚書
https://qiita.com/kokushin/items/f0a7066ff644036cba5e

投稿2018/01/17 03:24

masaya_ohashi

総合スコア9206

dnnd

2018/01/17 05:23

ご回答ありがとうございます。pjaxというプラグインが動いているのですね。参考サイト拝見させていただきました。その他参考サイトと合わせてトライしてみたいと思います。ありがとうございます。

行動規範の内容に同意します

その url のページの html ソースを見てください。

以下のように a タグの href 属性に遷移先を設定しているだけのようです。

<ul>

  <li class="n1">
    <a class="pjaxLink" href="/world/index.html">WORLD</a>
  </li>
  <li class="n2">
    <a class="pjaxLink" href="/character/index.html">CHARACTER</a>
  </li>
  <li class="n3">
    <a class="pjaxLink" href="/system/index.html">SYSTEM</a>
  </li>

  ・・・中略・・・  
</ul>