上記参考サイトを見ながらタブを作成しようとしていたのですが、なぜか上記サイトと同じようにして試してもうまくタブができません。
タブのタイトルもコンテンツも両方全て表示されてしまいます。
読み直したりしても、どこがいけないのかわからないので、わかる方がいましたら教えていただければと思っています。
また、JavaScriptのthis.tabsの中のtitleやcontentの中身にアイコンを加えるなど、HTMLでの記述をしたいときはどのようにすればいいかも、もしわかりましたら教えていただきたいです。
よろしくお願いいたします。
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: 'Tab 1', 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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/09/18 12:49
2016/09/18 12:56
退会済みユーザー
2016/09/18 13:03
2016/09/18 13:10
退会済みユーザー
2016/09/18 13:21
2016/09/18 13:25
2016/09/18 13:27
2016/09/18 13:28