js实现兼容ie浏览器的菜单点击效果

 在ie中，下面代码中的onclick会报错，不支持，所以我用了绑定事件（下面代码的onclick删不删都不影响）

<!--下面窗体-->
<div class="bottom">
    <div  class="w-center">
        <ul class="bottom-left" id="left-li">
            <li id="left_money" class="menu" onclick="show_right(left_money)">账户余额</li>
            <li id="detail_query" class="menu" onclick="show_right(detail_query)">明细查询</li>
            <li id="electronic_bill" class="menu" onclick="show_right(electronic_bill)">电子对账单</li>
            <li id="report_query" class="menu" onclick="show_right(report_query)">信息报告查询</li>
            <li id="account_link" class="menu" onclick="show_right(account_link)">个人账户挂接</li>
            <li id="bank_corp" class="menu" onclick="show_right(bank_corp)">银企对账</li>
            <li id="recieve_manager" class="menu" onclick="show_right(recieve_manager)">收款管家</li>
            <li id="business_service" class="menu" onclick="show_right(business_service)">商户服务</li>
            <li id="summary_acc_bill" class="menu" onclick="show_right(summary_acc_bill)">汇总记账清单</li>
            <li id="open_account" class="menu" onclick="show_right(open_account)">单位结算账户开户</li>
            <li id="allowed_pay_query" class="menu" onclick="show_right(allowed_pay_query)">账户可支付额度查询</li>
            <li id="receipt_manage" class="menu" onclick="show_right(receipt_manage)">回单管理</li>
            <li id="visual_analysis" class="menu" onclick="show_right(visual_analysis)">可视化分析</li>
            <li id="info_import" class="menu" onclick="show_right(info_import)">对账信息导入</li>
            <li id="online_finance_manage" class="menu" onclick="show_right(online_finance_manage)">在线财务管理</li>
            <li id="account_partner" class="menu" onclick="show_right(account_partner)">到账伴侣</li>
            <li id="more" class="menu" onclick="show_right(more)">更多</li>
        </ul>
        <div class="bottom-right">
            <div class="mainbox">

            </div>
        </div>

</div>

js代码如下：

<script>

    // ie浏览器不能直接标签里onclick,这里做兼容书写
    // 拿到共17个菜单li标签
    var li = document.getElementsByClassName('menu')
    len = li.length
    // 对每一个菜单li标签绑定事件
    for(var i=0;i<len;i++){
        //console在ie也不能用，用于谷歌调试
        //跑ie时要注释掉
        // console.log(li[i])
        li[i].onclick = function(){
            // console.log(this) //点击谁就输出谁
            // console.log(len);
            // 所有li标签设置成一个样式
            for(var i=0;i<len;i++){
                this.parentNode.children[i].style.backgroundColor = '#f0f0f0';
                this.parentNode.children[i].style.color = '#000'
            }
            //对当前点击的li标签再设置单独样式
            this.style.backgroundColor = '#b80020';
            this.style.color = '#fff'

        }
    }
</script>

ie中的效果：