H5 底部菜单 判断当前页面

接触的第二个H5项目，最近没休息好头脑一直有些发热。写到底部Tab-bar了，发现不会，最后鼓捣出个下面的解决方案，写完以后。我才发现其实，除了网页端有框架，其实H5手机端也有框架，好比说weui+5~不过本身写的仍是蛮开心的。

footer设置为组件，每一个须要引入的页面经过 $("footer").load("./component/footer.html")引入（路径本身改）；

HTML（component/footer）

<a href="index.html" data-src='index.html'>
    <span>
        <img src="" data-imgName='index' >
    </span>
    <p  class="">首页</p>
</a>
<a href="date.html" data-src='date.html'>
    <span>
        <img src="" data-imgName='date'>
    </span>
    <p>集会列表</p>
</a>
<a href="message.html" data-src='message'>
    <span>
        <img src="" data-imgName='message'>
    </span>
    <p>留言</p>
</a>
<a href="mineScouts.html" data-src='mineScouts.html'>
    <span>
        <img src="" data-imgName='mineScouts'>
    </span>
    <p class="" >个人童军</p>
</a>
<script>
复制代码

css(less仅供参考反正fixed在底部就对了）

footer{

    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    .flex4();
    background: #fff;
    box-shadow: -5px 0 5px #ddd;
    .current{
      // color: #58c2ef;
      color: #58c2ef;
    }

    a{

      width: 25%;
      .flex1();
      flex-direction: column;
      p{
        text-align: center;
        font-size: 14px;
        color: #c3c3c3;
      }
      span img{
        width: 30px;
        

      }

    }
  }
复制代码

js（记得本身引入JQERUY）

<script>
<script>
    resetImg();

    function resetImg(){
        // 填充图片
        var  $tabBtn=$("footer a"),
        $tabTxt=$("footer a p");
        $("a span>img").each(function(){
            var name=$(this).attr('data-imgName'),
            src="./img/icon_"+name+".png"
            $(this).attr("src",src);
        })


        // 判断当前页面的状态，添加状态
        var url = location.pathname,
            urlList=['index','date','message','mineScouts'];

            // var x=url.indexOf(urlList[3]);
            // console.log(x);
            for (var i = 0;i<urlList.length;i++) {
                   
               if(url.indexOf(urlList[i])>-1 ) {
                         // 文字添加
                    $tabBtn.eq(i).find('p').addClass('current');
                   var $thisName =$tabBtn.eq(i).find('img').attr('data-imgName');
                   $thisSrc='./img/icon_'+$thisName+"Active.png";
                   $tabBtn.eq(i).find('img').attr("src",$thisSrc);

         

}
}
}




</script>

复制代码

效果图以下，点击到新的页面后自动加载。有点取巧。

备注：参考https://www.cnblogs.com/mrcln/p/4063983.html）（韵脚学员）