riot.jsでのタブの作り方のどこが間違えっているか教えてください。

上記参考サイトを見ながらタブを作成しようとしていたのですが、なぜか上記サイトと同じようにして試してもうまくタブができません。
タブのタイトルもコンテンツも両方全て表示されてしまいます。

読み直したりしても、どこがいけないのかわからないので、わかる方がいましたら教えていただければと思っています。

また、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件

ベストアンサー

こういった感じのCSSは読み込んでいますか？

CSS
1.tabContent__item {
2	display: none;
3}
4.tabContent__item.is-active {
5	display: block;
6}
7

投稿2016/09/18 12:38

gin

総合スコア2722

退会済みユーザー

2016/09/18 12:49

本当に申し訳ございません。 CSSを読み込めていませんでした。ここのタブに取り掛かる前にshowを使って表示/非表示を切り替えることをしていたため、今回も頭の中で勝手にshowのように切り替わると勘違いしてしまっていました。。初歩的すぎるミスで申し訳ないです。質問の後半部分で記述しているタブのタイトルやコンテンツ内にHTMLの書式で書くことができるか、またその方法などももしわかりましたら教えていただけますでしょうか？文字列ではないので''を外してみたのですがうまくいかなく、探し方も難しく方法を見つけることができませんでしたので。。

gin

2016/09/18 12:56

使ったことないので分かりませんが「{ title: '<img src="img/icon.png" alt="">Tab 1', ref: 'tab1', content: 'aaa' },」こんな感じでは無理だったんでしょうか？

退会済みユーザー

2016/09/18 13:03

はい。そのようにするとRollupでコンパイル時になぜかエラーが出てしまいまして。。こちらにつきましては別途質問してみます。親切にご回答いただきありがとうございました。

gin

2016/09/18 13:10

なるほどです。あとはこんな感じでもありかなと思ったのですが、ちゃんとした方に教えてもらうのがいいですね！ <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><img src="{tab.img}" alt="">{tab.title}</li> { title: 'Tab 1', img: 'img/icon.png', ref: 'tab1', content: 'aaa' },

退会済みユーザー

2016/09/18 13:21

なるほど、そういうやり方もありですね！！すぐにいろいろ考えられてすごいです。。一旦質問しましたので、そちらを見ながらこの方法も考慮して進めていきます。ありがとうございました。

gin

2016/09/18 13:25

あっちも見ましたけど、 title: , これがダメなのはわかりますが、 title: '', これもダメです？↑の回答と同じですが^^;

gin

2016/09/18 13:27

もしくはこれ… title: '',

gin

2016/09/18 13:28

あ、むこうに書いた方がよさげですね。失礼しました。