选项卡组件。
<div data-am-widget="tabs" class="am-tabs am-tabs-default">
<ul class="am-tabs-nav am-cf">
<li class="am-active">
<a href="[data-tab-panel-0]">青春</a>
</li>
<li class="">
<a href="[data-tab-panel-1]">彩虹</a>
</li>
<li class="">
<a href="[data-tab-panel-2]">歌唱</a>
</li>
</ul>
<div class="am-tabs-bd">
<div data-tab-panel-0 class="am-tab-panel am-active">【青春】那时候有多好,任雨打湿裙角。忍不住哼起,心爱的旋律。绿油油的树叶,自由地在说笑。燕子忙归巢,风铃在舞蹈。经过青春的草地,彩虹忽然升起。即使视线渐渐模糊,它也在我心里。就像爱过的旋律,没人能抹去。因为生命存在失望,歌唱,所以才要歌唱。</div>
<div
data-tab-panel-1 class="am-tab-panel ">【彩虹】那时候有多好,任雨打湿裙角。忍不住哼起,心爱的旋律。绿油油的树叶,自由地在说笑。燕子忙归巢,风铃在舞蹈。经过青春的草地,彩虹忽然升起。即使视线渐渐模糊,它也在我心里。就像爱过的旋律,没人能抹去。因为生命存在失望,歌唱,所以才要歌唱。</div>
<div
data-tab-panel-2 class="am-tab-panel ">【歌唱】那时候有多好,任雨打湿裙角。忍不住哼起,心爱的旋律。绿油油的树叶,自由地在说笑。燕子忙归巢,风铃在舞蹈。经过青春的草地,彩虹忽然升起。即使视线渐渐模糊,它也在我心里。就像爱过的旋律,没人能抹去。因为生命存在失望,歌唱,所以才要歌唱。</div>
</div>
</div>
<div data-am-widget="tabs" class="am-tabs am-tabs-d2">
<ul class="am-tabs-nav am-cf">
<li class="am-active">
<a href="[data-tab-panel-0]">青春</a>
</li>
<li class="">
<a href="[data-tab-panel-1]">彩虹</a>
</li>
<li class="">
<a href="[data-tab-panel-2]">歌唱</a>
</li>
</ul>
<div class="am-tabs-bd">
<div data-tab-panel-0 class="am-tab-panel am-active">【青春】那时候有多好,任雨打湿裙角。忍不住哼起,心爱的旋律。绿油油的树叶,自由地在说笑。燕子忙归巢,风铃在舞蹈。经过青春的草地,彩虹忽然升起。即使视线渐渐模糊,它也在我心里。就像爱过的旋律,没人能抹去。因为生命存在失望,歌唱,所以才要歌唱。</div>
<div
data-tab-panel-1 class="am-tab-panel ">【彩虹】那时候有多好,任雨打湿裙角。忍不住哼起,心爱的旋律。绿油油的树叶,自由地在说笑。燕子忙归巢,风铃在舞蹈。经过青春的草地,彩虹忽然升起。即使视线渐渐模糊,它也在我心里。就像爱过的旋律,没人能抹去。因为生命存在失望,歌唱,所以才要歌唱。</div>
<div
data-tab-panel-2 class="am-tab-panel ">【歌唱】那时候有多好,任雨打湿裙角。忍不住哼起,心爱的旋律。绿油油的树叶,自由地在说笑。燕子忙归巢,风铃在舞蹈。经过青春的草地,彩虹忽然升起。即使视线渐渐模糊,它也在我心里。就像爱过的旋律,没人能抹去。因为生命存在失望,歌唱,所以才要歌唱。</div>
</div>
</div>
<body>
区域;本组件 Handlebars partial 名称为 tabs
,使用细节参照折叠面板组件。
var data = [
{
"title": "", // 选项卡标题
"content": "", // 选项卡内容
"active": false // 是否激活当前选项卡,true | false,只允许一个 Tab 标记为激活
}
];
return data;
var data = [
{
"header": "", // 选项卡标题
"substance": "", // 选项卡内容
"class": "" // 显示当前默认被选中的选项卡标题以及其内容,值是"active",如果有多个选项,只允许一个tab被激活
}
];
return data;
{
"id": "",
"className": "",
"theme": "",
"options": {
"noSwipe": false; // 是否禁用触控操作
},
"content": [
{
"title": "",
"content": "",
"active": ""
}
]
}
在容器上添加 data-am-tabs-noswipe="1"
。
<div data-am-widget="tabs" class="am-tabs am-tabs-default" data-am-tabs-noswipe="1">