jquery后台系统内页链接跳转左侧菜单选中到当前页

原创于 2018-03-05 17:43:22 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种实现在iframe或ajax加载的后台系统中，左侧菜单项跟随页面跳转而自动选中的方法。通过JavaScript操作DOM元素，确保用户在点击链接跳转到新页面时，左侧菜单能够准确反映当前所在位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该案例主要说的是左侧菜单固定，内容主要通过iframe或者ajax引入的后台系统页面。当内容页面有个链接点击跳到另外一个菜单页，左侧菜单要选中当前跳转页面对应的菜单。

我写的后台界面是用iframe实现：

在iframe页面中

<a href="#" class="btn btn-default btn-block" onclick="jumpUrl('baoxianyujingguanli/baodandaoqitixing.html')">查看全部</a>

function jumpUrl(url){
  var element =  window.parent.$('ul.nav a').filter(function() {
    return $(this).data('url') == url;
  }).addClass('active').parent();//菜单选中

  while (true) { //父类展开
    if (element.is('li')) {
      element = element.parent().addClass('in').parent();
    } else {
      break;
    }
  }