今回は「外部ファイル(html)からコンテンツを読み込んで表示するタブ」を実装します。
タブ機能って、簡単なものは同一ページ内にそれぞれのコンテンツ内容が記述されていて、「display:none;」や「display:block;」で表示/非表示を切り替えています。
しかしコンテンツ内容が多くなると、これではページの読み込みが遅くなってしまいがちです。
そこでコンテンツ内容を外部ファイル化することで、ページの読み込みを早くして、またコンテンツを管理をしやすくします。
今回のスクリプトの注意点や機能は以下のものです。

  • jQuery使用
  • タブ切替によって表示するコンテンツを外部ファイルから読み込む
  • urlパラメータによってロード時に表示するコンテンツの制御
  • コンテンツはスライドアップ/スライドダウンで切替

目次

  1. 制作コード
  2. 使い方
  3. urlパラメータによってロード時に表示するコンテンツを制御する

制作コードと使い方

まずは制作したものを記載します。
以下にはjavascriptとhtmlしか記載していませんので、他のファイルはこちらのgithubから確認してください。

使い方はこちら

script.js

index.html

使い方

このタブの使い方を説明します。
まずhtmlファイルから説明していきます。


  
    
    
  • tab1
    • 
    
  • tab2
    • 
    
  • tab3
    • 
    
  • tab4
    •

クラス名「glossarytab-item」の要素に「data-tab」があります。
この値が「glossarytab-item」がクリックされた時に読み込まれるhtmlファイルです。「data-tab」はファイルのパスを記述してください。
例では相対パスで記述していますが、絶対パスでも問題ありません。

id名「glossaryContents」内に読み込まれるコンテンツの内容が表示されます。できればこの要素は空にしておいてください。

htmlファイルの説明は以上です。

次にjsファイルの説明をしていきます。


/* ===========================================
  定数定義
===========================================*/
const tabItemClass = 'glossarytab-item';             // タブ要素のクラス名
const tabItemSelectClass = 'glossarytab-selected';   // タブ選択時にタブ要素に付与されるクラス名
const tabContentsId = 'glossaryContents';            // 読み込みコンテンツを表示する要素のid名

【tabItemClass】はタブ要素のクラス名
【tabItemSelectClass】はタブ選択時にタブ要素に付与されるクラス名
【glossaryContents】は読み込みコンテンツを表示する要素のid名
を入れます。


/* ===========================================
  変数定義
===========================================*/
let intItemPath = 'tab/tab1.html';                   // ロード時に読み込むコンテンツの初期値
let intItemTab = '[data-tab="'+ intItemPath +'"]';   // ロード時にtabItemSelectClassを付与するtabItemClass要素の初期値

【intItemPath】には最初に読み込まれるコンテンツのパスを入れます。

urlパラメータによってロード時に表示するコンテンツを制御する

別ページから、こちらで紹介しているタブ機能を実装したページに遷移するときにurlパラメータを付けると好きなタブコンテンツを表示できます。
例えば「https://blanks.site/tab.html?tab=2」とリンクさせると、ロード時に3番目のタブが選択され、3番目のタブの「data-tab」に設定されているコンテンツが読み込まれます。

ぜひ、このタブ機能をお使いくださいませ〜。