twitter-bootstrap 在 Bootstrap 中激活单击的选项卡

Make clicked tab active in Bootstrap

提问by gamer

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

我正在使用 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>

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.

我也为活动导航栏编写了 CSS。在这里，只有一个导航栏处于活动状态。我想让点击的导航栏处于活动状态，从而应用我的 CSS。我的 CSS 非常适合活动导航栏，而这种情况仅适用于一个。

I googled and found a solution to add this jQuery:

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

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

});

});

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

现在这就是我被困的地方。我不知道在哪里写这个 jQuery。

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

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

回答by rphonika

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 ?

当您的链接的 href 属性与href="#". 为什么 ？仅仅是因为每次点击链接都会触发对服务器的请求。在您的 JS 代码中，您添加方法preventDefault()以避免这种基本行为，但我认为这并不是您为此目的的真正目标，不是吗？

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

视图.py

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

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

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

回答by MohitC

If you dont want to send any additional context from views then you can handle it like this with resolver_match:

如果您不想从视图发送任何额外的上下文，那么您可以使用 resolver_match 来处理它：

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

where 'home' is the name given to your url pattern for / (probably '^$') in your urls.py. So obviously to use this you need to name all your url patterns, which is a good practice anyway.

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

回答by Daniel Garcia

Alternative including URL namespaces:

包括 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>

回答by nicholas shults

I recently ran into this problem and tried every solution I could find. Eventually, I came to this. This example assumes the path to this content is yoursite.com/about Give your link an id.

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

<li><a id="about" href="#">About</a></li>

var path = $(location).attr('pathname')
var pa = path.split("/")
$('#'+pa[1]).tab('show')

回答by antman

@rphonika has give a nice answer. But if you have many navigation menus then adding template logic in each list item makes the code untidy. Menu items can be assigned a unique id, the id passed in views and active class can be assigned using a one liner javascript code in html itself.

@rphonika 给出了一个很好的答案。但是如果你有很多导航菜单，那么在每个列表项中添加模板逻辑会使代码变得不整洁。菜单项可以分配一个唯一的 id，在视图和活动类中传递的 id 可以使用 html 本身的单行 javascript 代码分配。

base.html

基本文件

<ul class="nav navbar-nav navbar-left">
  <li><a class="navmenu-a" id="overview" href="{% url 'webapp:overview' %}">Overview</a></li>
  <li><a class="navmenu-a" id="plot" href="{% url 'webapp:plot' %}">Plot</a></li>
  <li><a class="navmenu-a" id="board" href="{% url 'webapp:board' %}">Board</a></li>
  <li><a class="navmenu-a" id="storyboard" href="{% url 'webapp:storyboard' %}">Storyboard</a></li>
  <li><a class="navmenu-a" id="freqs" href="{% url 'webapp:freqs' %}">Faq</a></li>
</ul>
.
.
.
<script type="text/javascript">
  {% if nmenu %} $("a#{{nmenu}}").addClass("navmenu-a-active") {% endif %}
</script>

views.py

视图.py

def overview(request):
    ...
    return render(request, 'overview.html', {'nmenu': 'overview'})


def plot(request):
    ...
    return render(request, 'plot.html', {'nmenu': 'plot'})

And so on for other views

依此类推其他视图

回答by Bigyellowbee

After adding gamer's JavaScript into your template code_here , you got to make sure you have the similar settings in your CSS file also, in order to make JavaScript work.

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

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

回答by Актуре Елтаев

If you want activate by context you can do like this variable == to context in .views

如果你想通过上下文激活你可以像这个变量 == 到 .views 中的上下文

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

回答by slim_chebbi

you can just add jquery between

你可以在两者之间添加 jquery

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

in you html

在你的 html