公開日:2019/08/05jQuery今回は「外部ファイル(html)からコンテンツを読み込んで表示するタブ」を実装します。タブ機能って、簡単なものは同一ページ内にそれぞれのコンテンツ内容が記述されていて、「display:none;」や「display:block;」で表示/非表示を切り替えています。コンテンツ内容が多くなると、これではページの読み込みが遅くなってしまいがちです。そこでコンテンツ内容を外部ファイル化することで、ページの読み込みを早くして、またコンテンツを管理をしやすくします。今回のスクリプトの注意点や機能は以下のものです。制作コード使い方urlパラメータによってロード時に表示するコンテンツを制御する制作コードと使い方まずは制作したものを記載します。以下にはjavascriptとhtmlしか記載していませんので、他のファイルはこちらのgithubから確認してください。charset="utf-8"></script></body></html>使い方このタブの使い方を説明します。htmlファイルから説明していきます。クラス名「glossarytab-item」の要素に「data-tab」があります。この値が「glossarytab-item」がクリックされた時に読み込まれるhtmlファイルです。「data-tab」はファイルのパスを記述してください。例では相対パスで記述していますが、絶対パスでも問題ありません。id名「glossaryContents」内に読み込まれるコンテンツの内容が表示されます。できればこの要素は空にしておいてください。htmlファイルの説明は以上です。次にjsファイルの説明をしていきます。【glossaryContents】は読み込みコンテンツを表示する要素のid名を入れます。【intItemPath】には最初に読み込まれるコンテンツのパスを入れます。urlパラメータによってロード時に表示するコンテンツを制御する別ページから、こちらで紹介しているタブ機能を実装したページに遷移するときにurlパラメータを付けると好きなタブコンテンツを表示できます。「https://blanks.site/tab.html?tab=2」とリンクさせると、ロード時に3番目のタブが選択され、3番目のタブの「data-tab」に設定されているコンテンツが読み込まれます。このタブ機能をお使いくださいませ〜。