javascript - 如何将 Navbar(logo, View('Home', ... 从 Flask-Nav 模块的徽标转换为可点击的链接
问题描述
在菜单栏部分的python代码部分(如app.py)中,我们可以将导航栏定义为:
# Define navbar with logo #
#######################################################
logo = img(src='/static/img/logo192.png', height="55",
width="70", style="margin-top:-15px",
)
# here we define our menu items
nav = Nav()
# registers the "top" menubar
nav.register_element('top', Navbar(logo,
View('Home', 'index'),
View('LogIn', 'login'),
View('SignUp', 'signup'),
))
我的模板中的代码部分 html:
<body>
<div class="navbar navbar-fixed-top">
{% block navbar %}
{{nav.top.render()}}
{% endblock %}
</div>
徽标 img 不可点击 我怎样才能使此图像可点击到任何链接
解决方案
如果我们在我的模板文件中添加一个脚本是可能的
向 <img 添加 id 属性后:
# Define navbar with logo #
#######################################################
logo = img(id='logo', src='/static/img/logo192.png', height="55",
width="70", style="margin-top:-15px",
)
并且可以将 <img 标签更改为带有 js 脚本的 <a 标签:
</body>
{% block scripts %}
{{super()}}
<script>
var initi = document.getElementById('logo').outerHTML;
console.log(initi);
var code =
'<a id = "alogo" href="">' +
initi +
'</a>';
console.log(initi);
window.addEventListener('load', function(event) {
document.getElementById('logo').outerHTML = code;
document.getElementById('alogo').href ="{{ url_for('image_map') }}"
});
</script>
{% endblock %}
推荐阅读
- php - 刷新div后Popover停止工作?
- python - 使用 python 或 bash 在多行文件中查找和替换模式
- php - 使用 ajax 在循环中填充表单字段
- javascript - 字符串文字第一个还是第二个串联?
- c# - Unity 中的浮动文本
- ruby-on-rails - 使用简单的 for 选择并保存多个复选框
- ruby-on-rails - 多态 has_and_belongs_to_many
- python - 如何根据部分字符串匹配加入两个数据框?
- python - 如何仅针对 Tensorflow 中的给定索引将矩阵乘以标量?
- android - 如何禁用 TabLayout 的点击效果?