Question

我正在使用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非常适合主动导航栏，对于这种情况只适用于一个。

我用Google搜索并找到了添加此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。但是，没有任何改进。我哪里出错了，我在哪里犯错？

Answer 1

当您的链接的href属性与href="#"不同时，此解决方案无效。为什么？仅仅因为链接上的每次点击都会触发对服务器的请求。在你的JS代码中，你添加方法 preventDefault（）以避免这种基本行为，但我认为这不是你的目的，不是吗？

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

<强> 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管理此功能。

Answer 2

如果您不想从视图中发送任何其他上下文，那么您可以使用resolver_match处理它：

<li {% if request.resolver_match.url_name == 'home' %}class="active"{% endif %}>
    <a href="/">HOME</a>
</li>

其中'home'是urls.py中/（可能是'^$'）的url模式的名称。很明显，要使用它，你需要命名所有的url模式，无论如何这是一个很好的做法。

Answer 3

我最近遇到了这个问题，并尝试了所有可以找到的解决方案。最终，我来到了这里。本示例假定此内容的路径是yoursite.com/about 给您的链接一个ID。

name = models.CharField(max_length=50)
address = models.CharField(max_length=100)
info = JSONField()

Answer 4

你可以在

之间添加jquery

 <script type="text/javascript">
  </script>

你在HTML中

Answer 5

将游戏玩家的JavaScript添加到您的模板code_here后，您必须确保您的CSS文件中也有类似的设置，以便使JavaScript工作。

.navbar-nav > li.active > a {
  color: #d74b4b;
  background: transparent;
  border-bottom: none;
}

Answer 6

包括URL名称空间的替代方法：

<li class="nav-item {% if request.resolver_match.view_name == 'scores:list' %}active{% endif %}">
    <a class="nav-link" href="{% url 'scores:list' %}">Scores</a>
</li>

Answer 7

如果您想通过上下文激活，您可以将变量==设置为.views中的上下文

<li class="nav-item {% ifequal variable context %}active{% endifequal%}">
    <a class="nav-link" href="{% url 'scores:list' %}">Scores</a>
</li>

Answer 8

我宁愿只使用来编辑模板，而不是为此同时编辑视图和模板。需要相同答案的人可能会考虑以下方法，而不是遵循公认的答案：

<ul class="navbar-nav">
  <li class="nav-item {% ifequal request.path '/' %} active {% endifequal %}">
      <a class="nav-link" href="/">Home</a>
  </li>
</ul

您可以使用自己的

更改上方的“索引”

Answer 9

我认为最简单的解决方案是JavaScript / CSS：无论如何，这是使用Jquery的解决方案。注意html中的n1,n2类

在base.html

   <nav>
    <ul class="nav flex-column">
       <li class="nav-item">
          <a class="nav-link n1" href="{% url 'polls:dashboard' %}">
          <span data-feather="home"></span>
          Dashboard 
          </a>
       </li>
       <li class="nav-item">
          <a class="nav-link n2" href="{% url 'polls:restaurants' %}">
          <span data-feather="file"></span>
          Restaurants
          </a>
       </li>
    </ul>
    </nav>
        <script>
        $('nav').find('{% block active_link%}{%endblock%}').addClass('active')
        </script>

然后在您的仪表板模板中：

{% block active_link %}.n1{%endblock%}

在您的餐馆模板中：

{% block active_link %}.n2{%endblock%}

在Bootstrap中激活单击选项卡

9 个答案: