Bulma Project　tabs

tabs コンポーネントで画面の切替

$$bulmaTabs(ssTabs, ssContent)を使って、Tabsメニューの切替えを行います。

tabs コンポーネント（下のタブをクリックしてください）

A Product Details

1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, reprehenderit voluptates! Quisquam dolores distinctio minima eligendi, sint enim quaerat. Totam eaque eligendi quis, itaque beatae id sit fuga voluptatibus a autem debitis sequi, officiis dolores corporis! Necessitatibus, libero voluptate? Fuga, natus iusto! Perspiciatis iure officiis rerum, illo temporibus iusto voluptatum.

B Delivery Information

2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, reprehenderit voluptates! Quisquam dolores distinctio minima eligendi, sint enim quaerat. Totam eaque eligendi quis, itaque beatae id sit fuga voluptatibus a autem debitis sequi, officiis dolores corporis! Necessitatibus, libero voluptate? Fuga, natus iusto! Perspiciatis iure officiis rerum, illo temporibus iusto voluptatum.

C Delivery support

3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, reprehenderit voluptates! Quisquam dolores distinctio minima eligendi, sint enim quaerat. Totam eaque eligendi quis, itaque beatae id sit fuga voluptatibus a autem debitis sequi, officiis dolores corporis! Necessitatibus, libero voluptate? Fuga, natus iusto! Perspiciatis iure officiis rerum, illo temporibus iusto voluptatum.

D Delivery jobs

4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, reprehenderit voluptates! Quisquam dolores distinctio minima eligendi, sint enim quaerat. Totam eaque eligendi quis, itaque beatae id sit fuga voluptatibus a autem debitis sequi, officiis dolores corporis! Necessitatibus, libero voluptate? Fuga, natus iusto! Perspiciatis iure officiis rerum, illo temporibus iusto voluptatum.

上記のソースコード

<!-- tabs$$.html -->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Bulma Project</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
    />
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"
    ></script>

    <script src="/src/js/shortBulma$$.js"></script>
    <!-- <script src="./js/shortBulma$$.js"></script> -->
  </head>

  <body>
    <section class="section">
      <div class="container">
        <div class="notification has-background-primary-light is-bold mb-1">
          <div class="container">
            <h1 class="title">タブメニューで画面の切換え</h1>
            <h2 class="subtitle is-5">tabs コンポーネント</h2>
          </div>
        </div>

        <div class="columns mt-5">
          <div class="column"></div>
          <!-- 各ページ -->
            <article class="message is-primary">
              <div class="message-header">
                <p>
                  tabs コンポーネントで画面の切替
                </p>
              </div>
              <div
                class="message-body has-background-white-bis"
                style="border-bottom: inset 2px #aaaa88"
              >
                <p>
                  $$bulmaTabs(ssTabs,
                  ssContent)を使って、Tabsメニューの切替えを行います。
                </p>
              </div>

              <h2 class="subtitle has-text-weight-bold pl-3">
                tabs コンポーネント<span
                  class="subtitle has-text-weight-normal is-size-6"
                  >（下のタブをクリックしてください）</span
                >
              </h2>
              <nav class="tabs is-boxed tabsX">
                <ul>
                  <li class="is-active" data-target="product-details">
                    <a>Sitemap</a>
                  </li>
                  <li data-target="delivery-information">
                    <a href="#0">Copyright</a>
                  </li>
                  <li data-target="delivery-support">
                    <a href="#0">Support</a>
                  </li>
                  <li data-target="delivery-jobs"><a href="#0">Jobs</a></li>
                </ul>
              </nav>

              <div class="px-6" id="tab-content">
                <div id="product-details">
                  <h3 class="is-size-5 title">A Product Details</h3>
                  <p>
                    1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Fuga, reprehenderit voluptates! Quisquam dolores distinctio
                    minima eligendi, sint enim quaerat. Totam eaque eligendi
                    quis, itaque beatae id sit fuga voluptatibus a autem debitis
                    sequi, officiis dolores corporis! Necessitatibus, libero
                    voluptate? Fuga, natus iusto! Perspiciatis iure officiis
                    rerum, illo temporibus iusto voluptatum.
                  </p>
                </div>
                <div id="delivery-information" class="is-hidden">
                  <h3 class="is-size-5 title">B Delivery Information</h3>
                  <p>
                    2. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Fuga, reprehenderit voluptates! Quisquam dolores distinctio
                    minima eligendi, sint enim quaerat. Totam eaque eligendi
                    quis, itaque beatae id sit fuga voluptatibus a autem debitis
                    sequi, officiis dolores corporis! Necessitatibus, libero
                    voluptate? Fuga, natus iusto! Perspiciatis iure officiis
                    rerum, illo temporibus iusto voluptatum.
                  </p>
                </div>
                <div id="delivery-support" class="is-hidden">
                  <h3 class="is-size-5 title">C Delivery support</h3>
                  <p>
                    3. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Fuga, reprehenderit voluptates! Quisquam dolores distinctio
                    minima eligendi, sint enim quaerat. Totam eaque eligendi
                    quis, itaque beatae id sit fuga voluptatibus a autem debitis
                    sequi, officiis dolores corporis! Necessitatibus, libero
                    voluptate? Fuga, natus iusto! Perspiciatis iure officiis
                    rerum, illo temporibus iusto voluptatum.
                  </p>
                </div>
                <div id="delivery-jobs" class="is-hidden">
                  <h3 class="is-size-5 title">D Delivery jobs</h3>
                  <p>
                    4. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Fuga, reprehenderit voluptates! Quisquam dolores distinctio
                    minima eligendi, sint enim quaerat. Totam eaque eligendi
                    quis, itaque beatae id sit fuga voluptatibus a autem debitis
                    sequi, officiis dolores corporis! Necessitatibus, libero
                    voluptate? Fuga, natus iusto! Perspiciatis iure officiis
                    rerum, illo temporibus iusto voluptatum.
                  </p>
                </div>
              </div>

              <hr />
            </article>

          <!-- 各ページ終り -->
          <div class="column"></div>
        </div>

      </div>
    </section>

    <script>
      $$bulmaTabs('.tabsX li', '#tab-content > div');

    </script>
  </body>
</html>

解説

~~ タブメニューで画面の切換え ~~

BulmaでJavascriptを利用するために、このWebサイトでは
　shortBulma$$.js または shortBulma.js
というライブラリを使います。
使い方の例：<script src="/src/js/shortBulma$$.js"></script>
headタグ内に挿入。但し、pathは状況によって変わります。
例えば、notification$$.htmlとshortBulma$$.jsが同じフォルダにある時は
<script src="./shortBulma$$.js"></script> または
<script src="shortBulma$$.js"></script> となります。

shortBulma$$.js等は、筆者がタイピングが苦手で長い名前に弱いため使っています。
より詳しくはライブラリ shortBulma$$.jsをご覧ください。

$$bulmaMenu('#burger', '#nav-links');
狭い画面で表示されるBulmaのburgerメニューをコントロールします。
burgerアイコンとbodyにそれぞれイベントを設定して、
- [burgerアイコン]のクリックでburgerメニューを開閉
- [body]のクリックでburgerメニューを閉じます。
$$bulmaTabs('.tabsX li', '#tab-content > div')
shortBulma.jsというライブラリを使用
$$bulmaTabs('.tabsX li', '#tab-content > div');
関数$$bulmaTabsは各タブ項目と各画面を指定するセレクタ文字列を引数に取り、タブ機能を実現しています