当我在该页面上时,我正在尝试将导航栏中的li
标签的类更改为active
。
jQuery将li
类更改为active
,但其中的<a>
停止工作。
当我禁用js文件时,锚定标记会正常运行。使用Django 2.0.6。
js文件:
(function($) {
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});
})(jQuery); // End of use strict
导航栏:
<nav class="navbar fixed-top navbar-expand-sm navbar-light" id="mainNav" style="background-color: #ffffff;">
<a class="navbar-brand js-scroll-trigger" href="#page-top">NT Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">portfolio<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pictures' %}">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">contact</a>
</li>
</ul>
</div>
</nav>
我该如何做?
答案 0 :(得分:0)
删除e.preventDefault()
以使事件按原样进行。
答案 1 :(得分:0)
e.preventDefault()
函数阻止列表项及其子元素的点击事件执行,这就是<a>
标记内的<li>
元素不起作用的原因。因此,在代码中删除e.preventDefault()
将最终解决您的问题。