【新手教程】利用openFrameGroup简单实现tab切换

流浪男

利用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');
        }
    })
}

李冰冰

点div之后页面不跟着切换啊

强大2

流浪男是牛男

技术支持-Altair

赞一个

yyyfx

感谢分享

lau_rocky

点个赞，谢谢分享

xiaoyutoxie

setFrameGroupIndex

CrazyDeng

在function的回调函数可以简单点：比如

$api.removeCls($api.dom('#tab div.active'),'active');
$api.addCls($api.byId(''+ret.name+''),'active');

Cssjidi

引入zepto.js还可以更简单
$(tab).index(ret.index).addClass('active').siblings().removeClass('active');

liushunyu

不错继续努力