php点击切换图片的底部导航栏,使用openFrameGroup左右切换页面时，底部导航栏和头部内容一......

问题：使用openFrameGroup设置了scrollEnabled:true,如何在切换页面时，底部导航栏的样式和头部的内容也一一对应切换？

index.html页面

底部导航

header{ background-color: #f2f2f2; }

header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }

header ul li.active{ display: block; }

#footer{  background-color: #f2f2f2; }

#footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }

#footer ul li.active{ color: #6ab494; }

#footer ul li:nth-child(1){ background-image: url(./image/bottombtn0101.png); }

#footer ul li:nth-child(2){ background-image: url(./image/bottombtn0201.png); }

#footer ul li:nth-child(3){ background-image: url(./image/bottombtn0301.png); }

#footer ul li:nth-child(4){ background-image: url(./image/bottombtn0401.png); }

#footer ul li:nth-child(1).active{ background-image: url(./image/bottombtn0102.png); }

#footer ul li:nth-child(2).active{ background-image: url(./image/bottombtn0202.png); }

#footer ul li:nth-child(3).active{ background-image: url(./image/bottombtn0302.png); }

#footer ul li:nth-child(4).active{ background-image: url(./image/bottombtn0402.png); }

.flex-con{

overflow: auto

}

• 云API
• 端API
• 开发
• 文档

• 云API
• 端API
• 开发
• 文档

apiready = function () {

$api.fixStatusBar( $api.dom('header') );

api.setStatusBarStyle({

style: 'dark',

color: '#6ab494'

});

funIniGroup();

api.parseTapmode();//优化点击事件处理

pull_down();

}

function funIniGroup(){

var eHeaderLis = $api.domAll('header li'),

frames = [];

for (var i = 0,len = eHeaderLis.length; i < len; i++) {

frames.push({

name: 'frame'+i,

url: './html/frame'+i+'.html',

bgColor : 'rgba(0,0,0,.2)',

bounces:true,

overScrollMode:'always',

softInputMode:'auto',

allowEdit:true,

});

}

api.openFrameGroup({

name: 'group',

scrollEnabled: true,

rect: {

x: 0,

y: $api.dom('header').offsetHeight,

w: api.winWidth,

h: $api.dom('#main').offsetHeight

},

index: 0,

frames: frames,

}, function (ret, err) {

});

}

// 随意切换按钮

function randomSwitchBtn( tag ) {

if( tag == $api.dom('#footer li.active') )return;

var eFootLis = $api.domAll('#footer li'),

eHeaderLis = $api.domAll('header li'),

index = 0;

for (var i = 0,len = eFootLis.length; i < len; i++) {

if( tag == eFootLis){

index = i;

}else{

$api.removeCls(eFootLis, 'active');

$api.removeCls(eHeaderLis, 'active');

}

}

$api.addCls( eFootLis[index], 'active');

$api.addCls( eHeaderLis[index], 'active');

api.setFrameGroupIndex({

name: 'group',

index: index

});

}