このようなサイトで入力を押すと入力する画面になって一覧を押すと一覧が表示されるのは入力と一覧で別のブ

このようなサイトで入力を押すと入力する画面になって一覧を押すと一覧が表示されるのは入力と一覧で別のブラウザを使って入力用の画面と一覧用の画面を作って後から合わせるのですか？
仕組みが分からないのでコメントお願いします。

質問者からの補足コメント

• 皆さんご回答ありがとうございます。

    補足日時：2021/01/01 22:37

No.4 ベストアンサー 回答者： Ogre7077 回答日時： 2021/01/01 03:25

一般的には「タブ切り替え」と呼ばれる画面設計ですね。

案1. タブ毎にページを用意
タブは単純なページ間リンクとし、各タブに対応するページをそれぞれ用意する。各ページでタブまでの表示内容を同じにすれば、見た目上はタブ切り替えをした様に見える。
例)
https://oshiete.goo.ne.jp/profile/543049082/

案2. タブ切り替え用スタイルを設置
ページ内に各タブの内容をすべて記載し、タブで切り替え表示される様に、スタイル(css)を設置する。簡単なので自作も可能。
例)
https://www.google.com/search?q=css+tab+selector

案3. タブ切り替え用スクリプトを設置
ページ内に各タブの内容をすべて記載し、タブで切り替え表示される様に、スクリプト(js)を設置する。簡単なので自作も可能。
例)
https://www.google.com/search?q=js+tab+selector
https://www.w3schools.com/howto/howto_js_tabs.asp
https://jqueryui.com/tabs/
https://vuejsexamples.com/tag/tab/

案4. 切り替え時に内容を取得して表示
タブ切り替え時に、タブの表示内容をサーバーから読み取ってページ内に即時反映するスクリプトを設置する。かなり複雑なので通常は UI フレームワーク製品を利用して実現する。

No.2 回答者： fujillin 回答日時： 2020/12/31 13:08

こんにちは

＞このようなサイトで入力を押すと入力する画面になって
＞一覧を押すと一覧が表示される
「このような」がどのようなのかわからない。（わかるのは質問者様だけ）

文面だけからで「ボタンやタグをクリックすると別の画面が表示される仕組み」ということならいろいろ考えられる。

代表的なものは、
単純に画面が切り替わるのなら、
・ボタンやタグにリンクが設定してある

一部の表示だけ切り替わるのなら、
・タブ形式の表示で、表示内容を切り替えている
・iframeなどを利用して、その内容を書き換えている
　（↑今時は少なくなっているかも？）
・ajax等で内容を書き換えている
などなど・・・

No.1 回答者： 放浪者 回答日時： 2020/12/31 12:01

ホームページと同じです。

考え方は、全ては一つのノートに、インデックスを付けて、めくっているのと同じです。

どこのサイトも、考え方は、ノートのページをめくっているのです。
ネットの徘徊は、図書館で、本を探しているのです。
見つけた本をめくると考えればわかりやすいですね。