HTML
1<ul> 2 <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }>{tab.title}</li> 3</ul> 4<div class="tabContent"> 5 <div each={ tab, i in tabs } class="tabContent__item { is-active: parent.isActiveTab(tab.ref) }">{tab.content}</div> 6</div>
Javascript
1this.tabs = [ 2 { title: <i class='fa fa-picture-o' aria-hidden='true'></i>, ref: 'tab1', content: "aaa" }, 3 { title: 'Tab 2', ref: 'tab2', content: "bbb" }, 4 { title: 'Tab 3', ref: 'tab3', content: "ccc" } 5] 6 7this.activeTab = 'tab1' 8isActiveTab(tab) { 9 return this.activeTab === tab 10} 11 12toggleTab(e) { 13 this.activeTab = e.item.tab.ref 14 return true 15}
HTML側に記述
上記のようなコードだと、JacaScript側の2行目にあるようにHTML表記のものを入れてしまうと、rollupでのコンパイル時にエラーが表示されてしまったため、下記のようにHTML側に記述する方法をいろいろ試してみたのですが、タブのコンテンツ側をうまく表示させることができなくて困っています。
現状、ロードした時点で、tab1のコンテンツも表示されない状況です。
また、toggleTab関数の方ではtab.refという変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。
どのようにすれば良いかわかる方、教えていただければと思います。
HTML
1<ul> 2 <li class="tabItem {is-active: parent.isActiveTab(tab1) }" onclick={ parent.toggleTab }> <span class='fa fa-picture-o' aria-hidden='true'></span> </li> 3 <li class="tabItem {is-active: parent.isActiveTab(tab2) }" onclick={ parent.toggleTab }>Tab 2</li> 4 <li class="tabItem {is-active: parent.isActiveTab(tab3) }" onclick={ parent.toggleTab }>Tab 3</li> 5</ul> 6<div class="tabContent"> 7 <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div> 8 <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div> 9 <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div> 10</div>
Javascript
1this.activeTab = 'tab1' 2isActiveTab(tab) { 3 return this.activeTab === tab 4} 5 6toggleTab(e) { 7 this.activeTab = e.item.tab.ref 8 return true 9}
2つの組み合わせ
HTML
1<ul> 2 <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><i class="fa { tab.title }" aria-hidden="true"></i></li> 3</ul> 4<div class="tabContent"> 5 <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div> 6 <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div> 7 <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div> 8</div>
Javascript
1this.tabs = [ 2 { title: 'fa-picture-o', ref: 'tab1' }, 3 { title: 'fa-picture-o', ref: 'tab2' }, 4 { title: 'fa-picture-o', ref: 'tab3' } 5] 6 7this.activeTab = 'tab1' 8isActiveTab(tab) { 9 return this.activeTab === tab 10} 11 12toggleTab(e) { 13 this.activeTab = e.item.tab.ref 14 return true 15}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/09/18 14:48
2016/09/18 14:56
退会済みユーザー
2016/09/18 15:03
2016/09/18 15:30
退会済みユーザー
2016/09/18 16:18
退会済みユーザー
2016/09/19 15:08
2016/09/19 15:31
退会済みユーザー
2016/09/19 15:39
2016/09/19 15:51 編集
退会済みユーザー
2016/09/19 16:04
2016/09/19 16:23 編集
退会済みユーザー
2016/09/19 16:26
退会済みユーザー
2016/09/19 16:39
2016/09/19 16:40
退会済みユーザー
2016/09/19 16:44