文章/答案/技术大牛

发布

社区首页 >问答首页 >如何转换导航栏的徽标(徽标，视图(‘主页’，...从Flask-Nav模块到可点击链接

问如何转换导航栏的徽标(徽标，视图(‘主页’，...从Flask-Nav模块到可点击链接
EN

Stack Overflow用户

提问于 2021-11-06 23:00:00

回答 1查看 15关注 0票数 0

在python代码部分(如app.py)的menubar部分中，我们可以将导航栏定义为：

#      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是不可点击的，我如何才能使此图像可点击到任何链接

javascript

html

clickable

flask-bootstrap

flask-nav

回答 1

Stack Overflow用户

发布于 2021-11-06 23:00:00

如果我们将脚本添加到我的模板文件，这是可能的

将id属性添加到

#      Define navbar with logo                        #
#######################################################
logo = img(id='logo', src='/static/img/logo192.png', height="55",
           width="70", style="margin-top:-15px",
           )

并可以使用js脚本将

</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 %}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69868573

复制

相似问题

问如何转换导航栏的徽标(徽标，视图(‘主页’，...从Flask-Nav模块到可点击链接
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何转换导航栏的徽标(徽标，视图(‘主页’，...从Flask-Nav模块到可点击链接EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何转换导航栏的徽标(徽标，视图(‘主页’，...从Flask-Nav模块到可点击链接
EN