Q&A発生している問題・エラーメッセージ
上部ナビゲーションのリンク先を同一ページの下部に表示する方法
該当のソースコード
HTML
1<body> 2 <ul> 3 <li><a href="index1.html">index1.htmlを下の赤枠に表示</a></li> 4 <li><a href="index.html2">index2.htmlを下の赤枠に表示</a></li> 5 <li><a href="index.html3">index3.htmlを下の赤枠に表示</a></li> 6 </ul> 7 8 <div class="hyouji-area"></div>
CSS
1ul { 2 display: flex; 3 border: 1px solid blue; 4 5 li { 6 width: 33%; 7 } 8 } 9 10 .hyouji-area { 11 margin-top: 20px; 12 width: 100%; 13 height: 500px; 14 border: 1px solid red; 15 }
試したこと
初歩的な質問ですみません。
よく見かける横並びのナビゲーションバーのリンクをクリックすると
下に表示されるhtmlファイルが切り替わる方法を知りたいです。
クリックしたら画像が切り替わる方法はjQueryで出来てますが、今回はhtmlファイルです。
iframeやjQueryの同一ページ内のscroll移動とかではないです。
調べた感じはjQueryのloadで出来るような感じでしたが
他によくある方法等はあるでしょうか？
回答3件
0
よくある方法等はあるでしょうか？
よくあるか、と言われるとあまり実際には見たことはないのですが、object要素を利用することもできます。
data属性を操作することによって、内容物を入れ替えることができます。
投稿2020/06/05 09:21
総合スコア36115
0
自己解決
jsで対応できることが分かりました。
返答頂いた方、ありがとうございました。
投稿2020/06/06 02:31
総合スコア0
0
JavaScript（jQuery）を使って読み込む方法
メリット
- JSを使っているため、ユーザーのアクションに対してシームレスに処理を行いやすい
- 非同期処理を行いやすいので、高速に見せることが可能
デメリット
- ブラウザのセキュリティにひっかかりやすいため、サーバー側の設定が必要になるパターンがある
- ものによっては、非同期処理などをしっかりしないと、逆に遅くなる
- サーバーサイドの連携（DBからの情報取得のためのAPIなど）をする際、必ずAPIの用意が必要になる
- 表示速度がユーザーの環境に影響されやすい
サーバーサイドを使う
メリット
- サーバーサイドでHTMLを組んでからブラウザに返すため、上行と下行での表示のタイムラグが比較的少ない
- ユーザー環境に依存しづらいため、基本的にサーバーがしっかりしていれば高速にページ表示が可能
- サーバーサイドでのデータベースからの情報取得などが、非常に行いやすい
- セキュリティ面を担保しやすい
デメリット
- ラーニングが必要
- データベース処理などを行ってからの、ページ取得となるため、サーバー時での処理が重い処理だと、その分ページ表示に時間がかかる
- セキュリティ面を考慮しないと、逆に攻撃に遭いやすくなる
下記からは、今回のようなものでは、冗長ですので、オマケです。参考程度に。
（動的にHTMLを読み込んだり、使用したりするものの実装においては有効な手法となりえるため、記載）
CMSを使う
メリット
- 一回ラーニングしさえすれば、かなり楽に実装できるようになる。
- ものによっては、どの手法よりも高速にできる。（逆も然り）
- 使っている人口が多いため、手法の調査が比較的やりやすい
デメリット
- テンプレートで楽をしようとすると、オリジナルの実装が非常に困難
- 余計な機能がいっぱいついているため、機能を使わない案件だと冗長
- CMS独自の手法でやらねばならないパターンもあるため、他の手法に応用がきかないものも多い
フロントエンドフレームワークを使う
これは、HTMLを読み込む、とは違いますが、共通パーツを、動的に表示切り替えするという観点から紹介です。
メリット
- シームレスな切り替えがより行いやすい
- ページ別の実装の方法などを統一できる（制作時に迷わずにすむ）
- 読み込みファイル量が比較的少ないため、上記の二つの手法よりページ表示速度を高速にしやすい。
デメリット
- ラーニングコストが非常に高い
- サーバーサイドの連携（DBからの情報取得のためのAPIなど）をする際、必ずAPIの用意が必要になる
- 表示速度がユーザーの環境に影響されやすい
投稿2020/06/05 09:25
総合スコア9528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。