老师，关于$key无法跳转的问题

(function(){
    var itemTmpl='<a class="$key btn-item" href="../$key/$key.html">'+
                    '<div class="tab-icon"></div>'+
                    '<div class="btn-name">$text</div>'+
                 '</a>';
    function init(){
        var items=[{
            key:'index',
            text:'首页'
        },{
            key:'order',
            text:'订单'
        },{
            key:'my',
            text:'我的 '
        }];
 
        var str=''; 
        items.forEach(function(item){
            str+=itemTmpl.replace(/\$key/g,item.key)
                     .replace('$text',item.text);
        })
 
        $('.bottombar').append($(str))
 
    /* 找到当前页面的   url来确定key值 */
        var arr=window.location.pathname.split('/');
        var page=arr[arr.length-2].replace('.html','');
 
    /* 将当前的页面对应的key值的a元素添加一个active的类 */
        $('a.'+page).addClass('active');
     
    }
 
    init()
})()

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>meituan</title>
    <script type="text/javascript" src="../jQuery.js"> </script>
    <script type="text/javascript" src="../index/pxToRem.js"></script><!-- 引入Rem基准 -->
    <link rel="stylesheet" href="contentList.css">
    <link rel="stylesheet" href="../index/bottombar.css">
</head>
 
<body>
    <!-- 头部开始 -->
    <div class="header">订单</div>
    <!-- 头部结束 -->
    <!-- 订单列表开始 -->
    <div class="wrap">
        <div class="order-list"></div>
        <div class="loading">加载中</div>
    </div>
    <!-- 订单列表结束 -->
 
 
 
    <!-- 底部菜单开始 -->
    <div class="bottombar"></div>
 
 
     <!-- 底部菜单结束 -->
</body>
 
 
 
 
 
 
<script type="text/javascript" src='../index/bottombar.js'></script>
<script type="text/javascript" src="contentList.js"></script>
</html>