gpt4 book ai didi

javascript - 当我在子页面时没有激活导航父页面

转载 作者:行者123 更新时间:2023-11-29 23:46:46 27 4
gpt4 key购买 nike

父页这样就好了:

enter image description here

当我点击子页面时,它的行为与父页面不同:

enter image description here

虽然我在子页面中有 base.html,但它不会按预期显示。

我已经尝试了多种解决方案,但都没有成功,希望您能以正确的方式指导我。

还是个新手,感谢大家的帮助!


编辑: 添加了更多 html

基础.html

<html>
<body>

<script>
$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});
</script>

<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'dashboard' %}">Prociation</a>

<a class="navbar-brand" href="#" id="notifications" data-container="body" data-toggle="popover" data-placement="bottom" title="Notifications">
<span class="glyphicon glyphicon-home"></span>
</a>

</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="{% url 'member_overview' %}">
{% trans 'Members' %}</a></li>
<li><a href="{% url 'docs' %}">
{% trans 'Documents' %}</a></li>
<li><a href="{% url 'articles' %}">
{% trans 'Articles' %}</a></li>
<li><a href="{% url 'pics' %}">
{% trans 'Pictures' %}</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>

member_overview.html

{% extends 'base.html' %}
...
<div class="row">
<a class="btn btn-primary btn-lg" href="{% url 'member_signup' %}">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
{% trans 'New Member' %}
</a>
</div>

...

member/urls.py(如果有帮助的话)

urlpatterns = [
url(r'^member_overview/$', views.member_overview.as_view(), name='member_overview'),
url(r'^member_signup/$', views.member_signup, name='member_signup'),
...
]

最佳答案

这可能是因为您已将每个 [a] 标签 [href] 设置为 [location.pathname] 值末尾的反斜杠(例如“/”)后缀值。

您可能需要为每个 [a] 标签 [href] 值添加反斜杠(例如“/”)

$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '/"]').closest('li').addClass('active');
});

希望对你的情况有所帮助

编辑:如果用户访问“member_signup”链接,您可能需要有一个条件

例子:

$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '/"]').closest('li').addClass('active');

if (location.pathname === '/member_signup') {
$('a[href="member_overview"]').closest('li').addClass('active');
}
});

关于javascript - 当我在子页面时没有激活导航父页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43706234/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com