在superset => templates => appbuilder 文件夹下找到 navbar.html 如果没有可对应新建,navbar.html内容如下

{% set menu = appbuilder.menu %}
{% set languages = appbuilder.languages %}
{% set WARNING_MSG = appbuilder.app.config.get('WARNING_MSG') %}
{% set app_icon_width = appbuilder.app.config.get('APP_ICON_WIDTH', 126) %}
{% set logo_target_path = appbuilder.app.config.get('LOGO_TARGET_PATH') or '/profile/{}/'.format(current_user.username) %} <div class="navbar navbar-static-top {{ menu.extra_classes }}" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ '/superset' + logo_target_path if current_user.username is defined else '#' }}">
<img
width="{{ app_icon_width }}"
src="{{ appbuilder.app_icon }}"
alt="{{ appbuilder.app_name }}"
/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if WARNING_MSG %}
<li class="alert alert-danger">
{{ WARNING_MSG | safe }}
</li>
{% endif %}
{% include 'appbuilder/navbar_menu.html' %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% include 'appbuilder/navbar_right.html' %}
</ul>
</div>
</div>
</div> <script>
// Highlight the navbar menu
const menus = document.querySelectorAll('.nav.navbar-nav li')
for (const menu of menus.values()) {
const classes = menu.getAttribute('class')
const as = menu.querySelectorAll('a')
for (const a of as.values()) {
const href = a.getAttribute('href')
let path = location.pathname
if (path.indexOf(href) > -1) {
menu.setAttribute('class', `${classes} active`)
} else {
menu.setAttribute('class', `${classes}`)
}
}
}
</script>

存在的问题:带有下拉菜单的不能高亮

Superset导航栏高亮问题处理的更多相关文章

  1. jquery导航栏高亮(二级菜单点击一级保持高亮)

    <script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...

  2. phpcms 完美实现 导航栏当前栏目高亮

    我们在用phpcms做网站的时候,经常碰到导航栏高亮功能,或者侧栏高亮,这个会涉及到几个问题: .栏目列表页子栏目高亮判断,如果当前页面为子栏目,他的顶级栏目如果在导航栏也要高亮. .内容页高亮,这个 ...

  3. elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...

  4. PHPCMS V9 导航栏当前栏目高亮

    实际上这个东西可有可无,很多站点看似导航栏当鼠标指向后都会变化等高亮处理,一般都比较醒目,但是实质点击过去后,都还是只是刚才的样式,因为这些站点的导航栏都没有对当前选中栏目做CSS的指定变化处理. 该 ...

  5. vue-router+elelment-ui,实现导航栏激活高亮

    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" backgrou ...

  6. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  7. [iOS微博项目 - 1.1] - 设置导航栏主题(统一样式)

    A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15   github: https://github ...

  8. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  9. element-ui使用导航栏跳转路由用法

    element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...

  10. 根据location地址,在导航栏高亮显示当前页面

    获取当前页面的地址栏.与导航栏中所有<a> 标签的href属性 进行比较.如果相等则高亮显示 此<a>标签. 注意点:a 标签的href 属性在浏览器解析时 是绝对路径. a  ...

随机推荐

  1. arm linux 移植 i2c-tools 与 简单使用

    介绍 i2c-tool是一个专门调试i2c的开源工具.可获取挂载的设备及设备地址,还可以在对应的设备指定寄存器设置值或者获取值等功能,对于驱动以及应用开发者比较友好. i2c-tool:v3.0.3 ...

  2. Gitbook的安装和部署

    安装 npm install gitbook-cli -g gitbook命令: gitbook init //初始化目录文件 gitbook help //列出gitbook所有的命令 gitboo ...

  3. NXP i.MX 8M Plus工业开发板规格书(四核ARM Cortex-A53 + 单核ARM Cortex-M7,主频1.6GHz)

      1 评估板简介 创龙科技TLIMX8MP-EVM是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 + 单核ARM Cortex-M7异构多核处理器设计的高性能工业评估板 ...

  4. wireshark查看https通讯

    前言 https在原有的http基础上增加了了一个TLS/SSL层,https的通讯过程是加密的,如果想用wireshark仔细分析TLS/SSL层,需要借助服务器证书公私钥或者用浏览器截取密钥: 接 ...

  5. Java开发常见问题分析和处理方案

    程序Bug的产生,通常分为三种类型 逻辑漏洞: 低级错误,程序执行后无法达到想要效果. 越界访问: 访问了非法区域,造成程序崩溃. 条件考虑不全面: 你以为你万无一失,但你永远都不知道输入参数究竟是什 ...

  6. Mybatis 快速入门(注解方式)

    导读 注解开发的方式只需要程序员开发Mapper接口即可,不需要编写映射文件(XML). 环境搭建 项目结构 SqlMapConfig.xml <!DOCTYPE configuration P ...

  7. 解决方案 | 预装win11如何退回win10?

    0.定义 本文所说的[退回]并不指的是win10升级后的变成win11再变为win10的退回.退回应该理解为[降级],或者叫作返回上一个版本.本文的适用范围局限于,预装系统是win11,想要不通过u盘 ...

  8. WebGL管网展示(及TubeGeometry优化)

    前言 管路展示在三维场景中很常见.比如地下管网,建筑里面的水果,暖通管道等等的展示. 建立管路的方式主要两种: 通过3DMax C4D Blender等建模工具进行建模. 通过路径数据,程序生成三维管 ...

  9. [oeasy]python0050_动态类型_静态类型_编译_运行

    动态类型_静态类型 回忆上次内容 上次了解了 帮助文档的 生成 开头的三引号注释 可以生成 帮助文档 文档 可以写成网页   python3 本身 也有 在线的帮助手册   目前的程序 提高了 可读性 ...

  10. ECMAScript 是什么?

    ECMAScript 是什么 简介 Ecma 标准定义了 ECMAScript 语言 ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript ...