在 Bootstrap 中使单击的选项卡处于活动状态答案

【问题标题】：Make clicked tab active in Bootstrap在 Bootstrap 中使单击的选项卡处于活动状态
【发布时间】：2014-07-30 18:34:41
【问题描述】：

我正在使用 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。但是，没有任何改善。我哪里出错了，我在哪里犯了错误？

【问题讨论】：

我喜欢这个解决方案，它的耦合度不如公认的答案：Pythonic way of adding class="active" to navbar (Django)
上面用户的解决方案比较准确，请点击链接进行解释。简而言之，将.....class="{% ifequal request.path '' %} active {% endifequal%}"..... 添加到导航中的每个“li”对象。将其各自的替换为其中。

标签： django twitter-bootstrap

【解决方案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 来管理此功能。

【讨论】：

你救了我的命，伙计！
太好了，谢谢。

【解决方案2】：

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

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

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

【讨论】：

很好的答案。我最终使用 request.resolver_match.namespaces.0 嵌套 urlpatterns
听起来很有趣。你能举一个更长的例子如何使用ist
很棒的答案，谢谢:)

【解决方案3】：

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

【讨论】：

我喜欢使用路由名称而不是 URL 本身的想法。太糟糕了，它不适用于详细（或嵌套）视图，仅适用于 *-list 视图...

【解决方案4】：

我最近遇到了这个问题，并尝试了我能找到的所有解决方案。最终，我来到了这里。此示例假定此内容的路径是 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')

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

@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

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


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

其他视图以此类推

【讨论】：

【解决方案7】：

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

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

您可以用自己的方式更改上面的“索引”

【讨论】：

【解决方案8】：

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

在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%}

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

你可以在之间添加jquery

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

在你的html中

【讨论】：