基本的にパソコン画面と同様のHTMLソースをスマホ画面でも表示させます。一般的に縦長画面で閲覧されるスマホ画面では工夫が必要になります。縦表示させるテクニックはごくごく基本的な手法です。処がコンテンツによっては其の基本的な手法が適切でない場合もあります。其の様なケースではスマホ画面の場合にはタブ切り替えは屡々採用されるテクニックです。ネットで検索しても有用な情報が多く見付けられます。Qiitaにも2017年8月6日付けで以下の情報が寄せられています。簡便さに加え汎用性も考慮され書かれています。処理される、当該機能の定番的な構成が取られています。レスポンシブWebデザインで扱い難い表組み(tableタグ)データ処でレスポンシブWebデザインで扱い難いデータに表組み(tableタグ)があります。表組みも全体を表示させられる余裕がありますが...スポンサーリンク縦画面で閲覧されることの多いスマホ画面では縦長で特に横に広がり易い表組みは見易いレイアウトで表示するには限界があります。其処でタブをトリガーとする表示切り替えを採用したい要請があります。縦列の切り替えが望まれるでしょう。タグの仕様上、縦でのグループ化は困難です。すると上に記したタブボタンとコンテンツが同数で構成される手法では無理が生じてしまいます。上のテーブルセルのみが表示切り替えされるような事態が招かれるでしょう。独自の手法でのタブ切り替えの実現を考案したものです。示した表組みのHTMLタグは以下のように記されるでしょう。属性を付与して初期に非表示にしたいテーブルセルです。タブ切り替えの表示、非表示のために使いたい目論見もあります。​31</td>​</tr></table>此の表組みをスマホ画面では以下のように表示したくあります。其々のタブのタップによって表示が切り替えられますので三種類の表示が考えられます。其の為、テーブルセルは別物になっています。TD13は、TD17、TD18、TD19と同じ内容が記されています。タブをタップをトリガーにコンソールに出力させるスクリプトを書けば以下のようになるでしょう。メソッドを利用しています。理解に役立つでしょう。以下の様にjQueryはDOMの順序を認識していると考えられます。ループ処理で極く基本的な剰余演算子を用いてグループ分けを実行するだけです。単純に3で割った余りによってグループ分けすれば良いでしょう。其れを考慮した場合分けをすれば良いだけです。表組みのタグ切り替え機能のコードは最終的に以下の様になります。li").removeClass("is-active");jQuery(this).addClass("is-active")});}});タブにはタップによってどれがタップされたのが明示出来る様にクラスを付与すれば都合が良いでしょう。ブラウザ幅の768pxを以て分岐点としています。汎用化のための最適化は全く図られていません。jQueryを利用しながら剥き出しのJavaScriptのメソッドも利用していたりします。時間が出来れば汎用化スクリプトを作成してみるのも一興かも知れないとは思っています。機能は限定的ながらも独自で作成してみたものを共有するものです。当サイトではGoogleによる広告サービスを利用しています。Googleの個人データの使用に関する情報はこちらから確認できます。