Superset导航栏高亮问题处理
在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导航栏高亮问题处理的更多相关文章
- jquery导航栏高亮(二级菜单点击一级保持高亮)
<script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...
- phpcms 完美实现 导航栏当前栏目高亮
我们在用phpcms做网站的时候,经常碰到导航栏高亮功能,或者侧栏高亮,这个会涉及到几个问题: .栏目列表页子栏目高亮判断,如果当前页面为子栏目,他的顶级栏目如果在导航栏也要高亮. .内容页高亮,这个 ...
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- PHPCMS V9 导航栏当前栏目高亮
实际上这个东西可有可无,很多站点看似导航栏当鼠标指向后都会变化等高亮处理,一般都比较醒目,但是实质点击过去后,都还是只是刚才的样式,因为这些站点的导航栏都没有对当前选中栏目做CSS的指定变化处理. 该 ...
- vue-router+elelment-ui,实现导航栏激活高亮
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" backgrou ...
- iOS开发笔记13:顶部标签式导航栏及下拉分类菜单
当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...
- [iOS微博项目 - 1.1] - 设置导航栏主题(统一样式)
A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15 github: https://github ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
- 根据location地址,在导航栏高亮显示当前页面
获取当前页面的地址栏.与导航栏中所有<a> 标签的href属性 进行比较.如果相等则高亮显示 此<a>标签. 注意点:a 标签的href 属性在浏览器解析时 是绝对路径. a ...
随机推荐
- arm linux 移植 i2c-tools 与 简单使用
介绍 i2c-tool是一个专门调试i2c的开源工具.可获取挂载的设备及设备地址,还可以在对应的设备指定寄存器设置值或者获取值等功能,对于驱动以及应用开发者比较友好. i2c-tool:v3.0.3 ...
- Gitbook的安装和部署
安装 npm install gitbook-cli -g gitbook命令: gitbook init //初始化目录文件 gitbook help //列出gitbook所有的命令 gitboo ...
- 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异构多核处理器设计的高性能工业评估板 ...
- wireshark查看https通讯
前言 https在原有的http基础上增加了了一个TLS/SSL层,https的通讯过程是加密的,如果想用wireshark仔细分析TLS/SSL层,需要借助服务器证书公私钥或者用浏览器截取密钥: 接 ...
- Java开发常见问题分析和处理方案
程序Bug的产生,通常分为三种类型 逻辑漏洞: 低级错误,程序执行后无法达到想要效果. 越界访问: 访问了非法区域,造成程序崩溃. 条件考虑不全面: 你以为你万无一失,但你永远都不知道输入参数究竟是什 ...
- Mybatis 快速入门(注解方式)
导读 注解开发的方式只需要程序员开发Mapper接口即可,不需要编写映射文件(XML). 环境搭建 项目结构 SqlMapConfig.xml <!DOCTYPE configuration P ...
- 解决方案 | 预装win11如何退回win10?
0.定义 本文所说的[退回]并不指的是win10升级后的变成win11再变为win10的退回.退回应该理解为[降级],或者叫作返回上一个版本.本文的适用范围局限于,预装系统是win11,想要不通过u盘 ...
- WebGL管网展示(及TubeGeometry优化)
前言 管路展示在三维场景中很常见.比如地下管网,建筑里面的水果,暖通管道等等的展示. 建立管路的方式主要两种: 通过3DMax C4D Blender等建模工具进行建模. 通过路径数据,程序生成三维管 ...
- [oeasy]python0050_动态类型_静态类型_编译_运行
动态类型_静态类型 回忆上次内容 上次了解了 帮助文档的 生成 开头的三引号注释 可以生成 帮助文档 文档 可以写成网页 python3 本身 也有 在线的帮助手册 目前的程序 提高了 可读性 ...
- ECMAScript 是什么?
ECMAScript 是什么 简介 Ecma 标准定义了 ECMAScript 语言 ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript ...