html无法填充底部移动端,移动端WebApp底部选项卡Bug，跪求大神解决！！！

本想实现一个移动端底部Tab选项卡插件，没想到在PC端及模拟器测试均正常，放到真机上测试，却发生了BUG，点击a元素返回上个页面，底部选项卡样式不正常切换但是index的值是正常的！！！求大神帮忙解决………………

html代码如下:

这是第一个页面

< a href="javascript:history.go(-1);">返回上个页面 a>

这是第二个页面

< a href="javascript:history.go(-1);">返回上个页面 a>

这是第三个页面

< a href="javascript:history.go(-1);">返回上个页面< /a>

这是第四个页面

< a href="javascript:history.go(-1);">返回上个页面< /a>

js代码如下：

$(function () {

var html = '

• '+

'

主页' +

'

财产' +

'

我的' +

'

设置'+

'

';

var footerbar = $('[data-role="footerbar"]');

footerbar.append(html);

var index = document.getElementsByClassName('page')[0].classList[0];

footerbar.find('ul>li:eq('+index+')').addClass('active');

footerbar.find('ul').on('click', 'li', function () {

$(this).addClass('active').siblings().removeClass('active');

var index = $(this).index();

location.href= parseInt(index)+1+'.html';

})

});