こんにちは！
アウラの河野です。
今回は制作中の案件で、タブメニューで表示を切り替える仕様があり、
簡単に作成する方法が見つかりましたので、ご紹介いたします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="contents"> <div class="tab_box"> <ul class="tab_list"> <li>タブ1</li> <li>タブ2</li> <li>タブ3</li> </ul> <ul class="article"> <li>ダミーテキスト1</li> <li>ダミーテキスト2</li> <li>ダミーテキスト3</li> </ul> </div> </div> |
ざっと、適当なマークアップとなっていますが。
上の「tab_list」とクラス名があるのが、メニューボタン箇所。
下の「article」と書かれているのが、メニューのボタンごとに切り替わりたいコンテンツとなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.tab_list { overflow: hidden; } .tab_list li { float: left; padding: 10px 20px; border: 1px solid #ccc; cursor: pointer; transition: .3s; } .tab_list li:not(:first-child) { border-left: none; } .tab_list li.active, { background-color: #000; border-color: #000; color: #fff; cursor: auto; } .article{ overflow: hidden; margin-top: -1px; } .article li { width: 320px; padding: 20px; border: 1px solid #ccc; } |
ここで肝となるのが、
ボタンと連動して、本文に「active」というクラスが付与されればOK。
「active」がついていなければ、表示を消すという仕組みです。
で、最後にvue.jsで記載すれば完了です！
|
1 2 3 4 5 6 7 8 9 10 11 |
new Vue({ el: '#contents', data: { isActive: '1' }, methods: { change: function(num){ this.isActive = num } } }) |
次はマークアップを少しカスタマイズしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="contents"> <div class="tab_box"> <ul class="tab_list"> <li v-on:click="change('A')" v-bind:class="{'active': isActive === 'A'}">タブ1</li> <li v-on:click="change('B')" v-bind:class="{'active': isActive === 'B'}">タブ2</li> <li v-on:click="change('C')" v-bind:class="{'active': isActive === 'C'}">タブ3</li> </ul> <ul class="article"> <li v-if="isActive === 'A'">ダミーテキスト1</li> <li v-else-if="isActive === 'B'">ダミーテキスト2</li> <li v-else-if="isActive === 'C'">ダミーテキスト3</li> </ul> </div> </div> |
v-on:clickで、変更したものに「active」というクラスの受け渡しを行い、
動的に本文の表示・非表示を切替ています。
少ないコードで、軽量に実装できるので、とても便利でした！
See the Pen
xNpKXj by 河野励 (@aura_kouno)
on CodePen.
