在Bootstrap中激活单击的选项卡 [英] Make clicked tab active in Bootstrap

问题描述

我正在使用Django，并且将Bootstrap与Django集成在一起。这是我的导航栏HTML代码：

I am using Django and integrated Bootstrap with Django. Here is my HTML code for the navigation bar:

<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非常适合活动导航栏，并且仅适用于这种情况。

I have written the CSS for an active navigation bar also. Here, only one navigation bar is active. I want to make the clicked navigation bar active and thus apply my CSS. My CSS is working perfect for active navigation bar and for this situation only for one.

我用Google搜索并找到了添加此jQuery的解决方案：

I googled and found a solution to add this jQuery:

$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');

}）;

现在这是我遇到的问题。我不知道在哪里写这个jQuery。

Now here is where I am stuck. I don't know where to write this jQuery.

我将此文件放在 static / js 文件夹中，将此代码命名为 nav-bar.js 。但是，没有任何改善。我在哪里出错，在哪里出错？

I put this file in the static/js folder and named this code nav-bar.js. However, there is no improvement. Where am I going wrong and where am I making mistakes?

推荐答案

当链接的href属性时，此解决方案不起作用将不同于 href =＃ 。为什么呢仅仅是因为每次单击链接都会触发对服务器的请求。在您的JS代码中，添加了 preventDefault（）方法以避免这种基本行为，但是我认为这并不是您真正的目标，不是吗？

This solution didn't work when the href attribute of your links will be different from href="#". Why ? Simply because each click on a link triggers a request to the server. In your JS code, you add the method preventDefault() in order to avoid this basic behavior, but I think that not really your objective for this purpose, isn't it ?

要处理这种功能，您可以通过添加以下内容来更新模板代码：

To handle this kind of feature you can update your template code by adding something like this :

base.html

<div class="collapse navbar-collapse" id="tn-navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="{% if nbar == 'home' %}active{% endif %}">
            <a href="/">HOME</a>
        </li>
        ...
    </ul>
</div>

views.py

def your_view(request):
    ...
    return render(request, 'yourtemplate.html', {'nbar': 'home'})

通过这种方式，您不必使用javascript管理此功能。

With this way, you don't have to manage this feature with javascript.

这篇关于在Bootstrap中激活单击的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！