首页 > 其他 > 详细

2016-4-7

时间:2016-04-07 13:18:30      阅读:172      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!