利用openFrameGroup的scrollEnabled的属性来实现tab形式的切换，并对应关联菜单的样式 css就不写了，当切换时给对应的菜单添加 class类 active
<div id="tab">
<div class="active" id="tab1">菜单1</div>
<div id="tab2">菜单2</div>
<div id="tab3">菜单3</div>
</div>
js的实现
apiready = function(){
api.openFrameGroup ({
name: 'group',
scrollEnabled:true,
index:0,
frames:
[{
name: 'demo1',
url: 'demo1.html',
bounces:true,
vScrollBarEnabled:false,
hScrollBarEnabled:false
},{
name: 'demo2',
url: 'demo2.html',
bounces:true,
vScrollBarEnabled:false,
hScrollBarEnabled:false
},{
name: 'demo3',
url: 'demo3.html',
bounces:true,
vScrollBarEnabled:false,
hScrollBarEnabled:false
}]
}, function(ret, err){
var $tab = $api.byId('tab');
var $tabBar = $api.domAll($tab, 'div');//获取tab下div标签
for (var j = 0; j < $tabBar.length; j++) {
//移除全部active
$api.removeCls($tabBar[j], 'active');
}
var index = ret.index;
if(index==0){
var $obj = $api.byId('tab1');
$api.addCls($obj, 'active');
}else if(index==1){
var $obj = $api.byId('tab2');
$api.addCls($obj, 'active');
}else if(index==2){
var $obj = $api.byId('tab3');
$api.addCls($obj, 'active');
}
})
}