移动端WebApp底部选项卡Bug，跪求大神解决！！！

Question

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

html代码如下:

<div class="0 page">

<h1>这是第一个页面</h1>
<div data-role="footerbar"></div>

</div>

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

<div class="1 page">

<h1>这是第二个页面</h1>
<div data-role="footerbar"></div>

</div>

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

<div class="2 page">

<h1>这是第三个页面</h1>
<div data-role="footerbar"></div>

</div>

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

<div class="3 page">

<h1>这是第四个页面</h1>
<div data-role="footerbar"></div>

</div>

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

js代码如下：

$(function () {

var html = '<ul>'+
    '<li>主页</li>' +
    '<li>财产</li>' +
    '<li>我的</li>' +
    '<li>设置</li>'+
    '</ul>';
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';
})

});