Metronic5.1导航菜单状态在切换页面时的适时调整

无论是Metronic5.1、gentelella、admilte等等bootstrap框架中左侧菜单,如果是静态页面,那么菜单状态都是设置好的。以下以Metronic5.1为例:

<li class="m-menu__item  m-menu__item--submenu m-menu__item--open m-menu__item--expanded" aria-haspopup="true"  data-menu-submenu-toggle="hover">
                                <a  href="#" class="m-menu__link m-menu__toggle">
                                    <i class="m-menu__link-icon flaticon-placeholder-1"></i>
                                    <span class="m-menu__link-text">
                                        Maps
                                    </span>
                                    <i class="m-menu__ver-arrow la la-angle-right"></i>
                                </a>
                                <div class="m-menu__submenu ">
                                    <span class="m-menu__arrow"></span>
                                    <ul class="m-menu__subnav">
                                        <li class="m-menu__item  m-menu__item--parent" aria-haspopup="true" >
                                            <span class="m-menu__link">
                                                <span class="m-menu__link-text">
                                                    Maps
                                                </span>
                                            </span>
                                        </li>
                                        <li class="m-menu__item  m-menu__item--active" aria-haspopup="true" >
                                            <a  href="../../components/maps/google-maps.html" class="m-menu__link ">
                                                <i class="m-menu__link-bullet m-menu__link-bullet--dot">
                                                    <span></span>
                                                </i>
                                                <span class="m-menu__link-text">
                                                    Google Maps
                                                </span>
                                            </a>
                                        </li>
                                        <li class="m-menu__item " aria-haspopup="true" >
                                            <a  href="../../components/maps/jqvmap.html" class="m-menu__link ">
                                                <i class="m-menu__link-bullet m-menu__link-bullet--dot">
                                                    <span></span>
                                                </i>
                                                <span class="m-menu__link-text">
                                                    JQVMap
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
m-menu__item  m-menu__item--submenu m-menu__item--open m-menu__item--expanded是菜单分组,
m-menu__item  m-menu__item--active呢是当前选中的菜单项。那么如何在切换页面的时候让下一个页面的导航菜单分组实现m-menu__item--open m-menu__item--expanded并且当前选中的菜单项实现m-menu__item--active就是要解决的问题:
var CURRENT_URL = window.location.pathname.split(‘#‘)[0].split(‘?‘)[0];
            $("#m_ver_menu").find(‘a[href="‘ + CURRENT_URL + ‘"]‘).parent(‘li‘).parents(‘li‘).eq(0).addClass(‘m-menu__item--open‘).addClass(‘m-menu__item--expanded‘);
            $("#m_ver_menu").find(‘a[href="‘ + CURRENT_URL + ‘"]‘).parent(‘li‘).addClass(‘m-menu__item--active‘);
使用window.location.pathname而不使用window.location.href,是因为window.location.href的返回值带有"http://..."等内容。仅此记录。

原文地址:https://www.cnblogs.com/gwjtssy/p/8537221.html

时间: 2024-10-09 06:36:04

Metronic5.1导航菜单状态在切换页面时的适时调整的相关文章

Vue切换页面时中断axios请求

在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页面的数据显示造成一定影响 所以我们应该,切换页面前中断前面所有请求 Vue.prototype.$http= axios;//Vue函数添加一个原型属性$axios 指向axios,这样vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了 const Cance

Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页面切换 原文地址:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html

vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息

可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent}, props: [], beforeRouteLeave (to, from, next) {//离开当前页 if(this.updateCount > 1){ //更新次数大于1 说明用户修改过当前页数据 因为获取详情时会更新一次 if(from.path.includes('nowPath'

解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题

有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 解决办法: 在 Vue项目的main.js文件中加入以下代码即可解决: router.afterEach((to,from,ne

每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位置如下: 2. 还可以在实例router对象的时候设置 export default new Router({ mode: 'hash', // base: '/dist/', scrollBehavior: () => ({ y: 0

爱淘宝手机版分类导航菜单弹出效果设计

来和大家一起讨论讨论爱淘宝手机版的分类导航菜单弹出效果是如何设计实现的.先来看几个截图,一个是爱淘宝官方网站的截图,另一部分是我仿照爱淘宝做的截图 先声明一下我们只是借鉴爱淘宝手机版界面来进行技术的学习,如有博友看到请各位一定要理解.此博客毫无盗用淘宝核心技术. 第一张图是爱淘宝官网的截图,后面两张是我们自己仿照做的截图. 首先分析一下要实现的功能细节 点击手机页面商品列表的图片,导航菜单会从手机的右侧出来 导航菜单下面会有一个遮盖层,这样子的作用防止用户点击最底层的商品 最底层的商品可以在遮盖

jQuery和CSS3超酷3D页面切换导航菜单插件

这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件.该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷. 效果演示:http://www.htmleaf.com/Demo/201504111660.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201504111659.html

JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示

一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include进来.这样,当要对导航栏进行修改时,只需要修改一个文件,而不用修改所有相关的页面文件.不过,我这里没有这样做,没有抽取出来. 二.实现当前页面的标识+不同页面的head头部背景图片的改变 现在在(一)实现的基础之上,来实现导航栏当前所选页面的菜单项高亮显示,让访问者一路了然知道"我正在这里"

一个简单的导航菜单切换显示

一直都在用导航栏菜单选项的切换,使用js,jquery实现过相应的代码.下面展示一下用js实现切换: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> #container{width: 1100px;