码迷,mamicode.com
首页 > 其他好文 > 详细

2016-4-7

时间:2016-04-07 13:20:33      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

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

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>‘);
})();

 

2016-4-7

标签:

原文地址:http://www.cnblogs.com/feiwu123/p/5362977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!