タブ切り替えスクリプト「yetii.js」の使い方

MARKLEAPS

2021.04.09

シンプルなタブ切り替えスクリプト「yetii.js」の使い方をご紹介します。

DEMO

「yetii.js」を読み込み

配布元
yetii.js

<head>内に「yetii.js」を読み込みます。

<script type="text/javascript" src="yetii.js"></script>

1	<script type="text/javascript" src="yetii.js"></script>

htmlの記述

<div id="tab-container">

    <ul id="tab-container-nav">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
    </ul>

    <div class="tab" id="tab1">
        <p>tab1</p>
    </div>

    <div class="tab" id="tab2">
        <p>tab2</p>
    </div>

</div>

    <script type="text/javascript">
    var tabber = new Yetii({
    id: 'tab-container',
    persist: true
    });
    </script>

</ul>

</div>

</div>

var tabber = new Yetii({

id: 'tab-container',

persist: true

});

</script>

<div id=”tab-container”>～</div>
タブ切り替えを実装する範囲をdivで囲みます。
id名は何でもよいですが、変更する際はscriptのトリガーのid（id: ‘tab-container’）も合わせて変更します。

<ul id=”tab-container-nav”>
タブ切り替えのメニュー部分です。
idは変更しても良いですが、親要素のidに基づき、○○-navという規則で命名します。
例：
親要素のidが「tab-container」であれば、メニュー部分のidは「tab-container-nav」とします。
親要素のidが「tab-box」であれば、メニュー部分のidは「tab-box-nav」とします。

<div class=”tab” id=”tab1″>～</div>
<div class=”tab” id=”tab2″>～</div>
内容が切り替わる箇所です。

class名は「tab」で統一します。

オプション設定

必須記述
以下の記述は必須となります。

<script type="text/javascript">
var tabber = new Yetii({
    id: 'tab-container'
});
</script>

var tabber = new Yetii({

id: 'tab-container'

});

</script>

同一ページ内にタブ切り替えを複数設置

<script type="text/javascript">
var tabber1 = new Yetii({
    id: 'tab-container1'
});
</script>

var tabber2 = new Yetii({
    id: 'tab-container2'
});
</script>