2016-4-7

这几天一直在整用户中心。

js动态写菜单栏，并根据路径名来selected改变颜色。

示意图

html代码

<div class="menu_warp">
      <script src="<{$static_url}>callcenter/scripts/menu.js"></script>
</div>

JS代码

(function(){
    var map = {
        ‘index‘ : 0,
        ‘self_help‘ : 1,
        ‘helps‘ : 2,
    }

    function isSelect(idx){
        var pathname = location.pathname;
        pathname = pathname.split(‘/‘)[2];
        return map[pathname] != idx ? ‘    <li>‘ : ‘    <li class="selected">‘
    }
    document.write(‘<div class="menus">‘);
    document.write(‘<ul class="menu_ul">‘);
    document.write(isSelect(0));
    document.write(‘        <a href="/callcenter/index" class="su_nav">首页</a>‘);
    document.write(‘    </li>‘);
    document.write(isSelect(1));
    document.write(‘        <a href="/callcenter/self_help" class="su_nav">自助服务</a>‘);
    document.write(‘    </li>‘);
    document.write(isSelect(2));
    document.write(‘        <a href="/callcenter/helps" class="su_nav">帮助</a>‘);
    document.write(‘    </li>‘);
    document.write(‘</ul>‘);
    document.write(‘</div>‘);
    document.write(‘<a href="javascript:;" class="su_logo">‘);
    document.write(‘    <img style="width:300px;"src="http://gameapi.xiaoyou-game.com/static/usercenter/images/xiaoyoutianxia.png" />‘);
    document.write(‘</a>‘);
})();