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）（韻腳學員）