• 简单的 菜单当前选中 解决思路


            任何一个网站,都是离不开导航或菜单,为了让用户清楚的知道自己身处何方,“面包屑”路径也是经常被的应用的。但是,当前所属菜单的选中样式也是同样是经常被采用的。

           例如我们经常用到的google音乐的这种样式:image

           像这种菜单,基本每个页面都会出现的,我们肯定会做一个控件来到处引用或者放到母版页里,这样就会出现选中的问题。呵呵,当然实现的方法也是多种多样,现在就说说自己的两种比较简单的解决方法,都是通过js实现。

            1,让页面本身去实现选中

             这种方法要让每个菜单项可以被页面的js调用,基本的方法就是:为菜单的每一项加一个id,写一个js的方法,去获取选中状态的菜单项,动态把样式添加上。很简单,但是每个页面都要去调用这个js,并且传入相应的参数,当然你也可以在某个菜单项下所有页面都会引用的控件中去实现,但是如果菜单比较多的话,还会存在维护的问题。

           2,让菜单自己去实现要选中哪个项

              这个方法,比上面那个更简单,更方便。

             html代码:

         <ul id="ul_leftmenu">
                <li colhref="page1.aspx,page1_update.aspx"><a href="page1.aspx">菜单1</a></li>
              <li colhref="page2.aspx,page2_update.aspx"><a href="page2.aspx">菜单2</a></li>
             <li colhref="page3.aspx,page3_update.aspx,page3_show2.aspx"><a href="page3.aspx">菜单3</a></li>
         </ul>

              这是页面的代码,其中colhref是自己定义的属性,你可以任意命名,基本的dom和jquery都可以很简单的获取这个属性的值,当然的它的值意思:打开这个值包含的页面时,会选中这个项。也就是是说,你要自己把这个菜单项下的页面的路径添加这个自定义的属性中。

               有了这个属性,实现起来就是相当简单了,

              js代码:

    function selectCurrentMenu(ulMenuId) {
        var currentPage = location.pathname;//  获取当前页面的路径
        var currentPageName = currentPage.substring(currentPage.lastIndexOf("/") + 1);//获取当前文件名
        var liMenus = $("#" + ulMenuId).children();//获取所有的菜单项
        //  遍历,匹配,选中
        if (liMenus != null && liMenus.length > 0) {
            for (var i = 0; i < liMenus.length; i++) {
                if ($(liMenus[i]).attr("colhref").indexOf(currentPageName) >= 0) {
                    $(liMenus[i]).attr("class", "li_current");
                    break;
                }
            }
        }
    }

            然后在页面load时调用这个js方法,传入菜单ID就行了。      

            OK,只需要给菜单的这个控件做操作,就可以实现所有的菜单选中效果,比第一个思路简单多了,特别适用于后期维护。你的页面很多了,才去实现选中效果,这个方法再适合不过了。但是,如果一个选中菜单下有太多的页面,那么自定义属性就会有很长的值,看起来真是有点难看,但是实现功能绝对没问题。哈哈。。。

           总结:如果菜单项比较少,推荐第一种,选中的控制可以分别放到公共的区域;如果是网站后来要增加这种效果,或者菜单项比较多,每个菜单项下页面又不是太多,第二种简直就是完美。

  • 相关阅读:
    jmeter响应的二进制数据转化为中文
    jmeter设置中文显示与更换背景
    jmeter更改响应数据格式为中文显示
    过渡性模块重载
    金蝶自动生成拆卸单
    0123工作备份2
    0123工作备份1
    0123工作备份
    oracle中如何修改用户名和密码
    0118工作备份
  • 原文地址:https://www.cnblogs.com/forcertain/p/2000719.html
Copyright © 2020-2023  润新知