我正在使用 Django 并将 Bootstrap 与 Django 集成。这是我的导航栏 HTML 代码:
<div 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=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">RacingDNA</a></li>
<li><a href="#">Skater Game</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
我还为活动导航栏编写了 CSS。此处,只有一个导航栏处于活动状态。我想让单击的导航栏处于活动状态,从而应用我的 CSS。我的 CSS 非常适合活动导航栏,但仅适用于这种情况。
我用谷歌搜索并找到了添加此 jQuery 的解决方案:
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
现在我被困住了。我不知道在哪里写这个 jQuery。
我把这个文件放在static/js
文件夹并命名此代码nav-bar.js
。然而,没有任何改善。我哪里出错了,哪里犯了错误?
如果您不想从视图发送任何额外的上下文,那么您可以使用resolver_match这样处理它:
<li {% if request.resolver_match.url_name == 'home' %}class="active"{% endif %}>
<a href="/">HOME</a>
</li>
其中 'home' 是为 / 的 url 模式指定的名称(可能是'^$'
)在你的 urls.py 中。
显然,要使用它,您需要命名所有 url 模式,无论如何,这是一个很好的做法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)