タブをタップした際、ページ遷移なしで記事一覧カテゴリの切り替え

Question

こちらのページのように、タブメニューをタップして、記事一覧を切り替えたいです。
https://demo.swell-theme.com/demo02/

wordpressテーマのswellですが、ロジックは一般的なDom操作と思います。
ソースを見ると、javascriptでShowとHiddenを切り替えて、
とくにボタンタップ時に通信が走ることもないみたいです。

記事データ自体は非表示にかかわらずすべて読み込んでいて、
表示/非表示を切り替えているという理解で大丈夫でしょうか。

またこちらのサイトだけでなく、一般論としてよく使われるロジックなどのお話も
うかがえると嬉しいです。全記事を読み込むのはロードが重くならないのかなと気になりました。

よろしくお願いいたしますm(_ _)m

Answer 1

記事データ自体は非表示にかかわらずすべて読み込んでいて、
表示/非表示を切り替えているという理解で大丈夫でしょうか。
掲示されたデモページのHTMLを見るに、その仕様になっています。
具体的にはタブのクリックのたびに当たるクラスを切り替え、opacityとvisibilityを変更しています。

またこちらのサイトだけでなく、一般論としてよく使われるロジックなどのお話も
うかがえると嬉しいです。全記事を読み込むのはロードが重くならないのかなと気になりました。
こちらはケースバイベースです。
情報量が少なければ、ロードに関してはあまり気にしなくて良いかと。
ロジックの話ですが、以下の場合はajaxで後から記事をロードしにいくパターンの方が好まれるかと。

• タブの切り替えで読み込まれる情報が大きい場合
• タブの切り替えで読み込まれる情報が頻繁に更新されるものの場合
• タブの切り替えで読み込まれる情報を動的に変化させたい場合 (1つ上とやや重複)

ajaxの用に後から読みに行く場合、ネットの回線によってはタブのクリックから表示までに時間がかかる可能性があります。

Comments

[webserviceNI]

ありがとうございます。参考になりました