公共页面如何在跳转页面之后变换样式

今天我要记录的这个是h5+css3+jquery如何做公共页面

比如手机端做一个公共的下tab页面怎么嵌套在其他页面当中我的样式是这个

 

 这个上面是svg下面是文字用flex布局搭建出来上面的每个li都是要跳转的页面

实现思路

首先我要把这个公共页面嵌套在其他各个跳转的页面当中我采用的方式是

比如精选页面要用这个tab那么我要在script中写如下代码

  $(document).ready(function () {
　　　　　　　　　　　//这里是你要在精选页面找个位置载入公共页面比如你要在底部建立一个div类名为footer
                $('.footer').load('./Publicpage.html',function(){
                    getPathname(0);
                });
            });

公共页面展示代码

 function getPathname(protoType){
            var arr=['index','cart','cloud','my','share'];
            $('.footer li img').each(function(i,e){
                $(e).attr('src', baseUrl+'/myDesign/menu/imgs/'+arr[i]+'-public.svg');
            })
            $('.footer').find('ul li').eq(protoType).addClass('navigat').siblings().removeClass('navigat');
            $('.footer li:eq('+protoType+') img').attr('src', baseUrl+'/myDesign/menu/imgs/'+arr[protoType]+'.svg')
        }

上面