Fatal编程技术网

Javascript 当I'；我在子页面

javascript jquery css django

Javascript 当I'；我在子页面,javascript,jquery,css,django,Javascript,Jquery,Css,Django,父页面很好，如下所示： 单击子页面时，其行为与父页面不同： 虽然我在子页面中有base.html，但它不会如我所愿显示出来 我已经尝试了好几种解决方案，但运气不佳，所以希望你能以正确的方式指导我 还是个新手，谢谢你们的帮助，伙计们 编辑：添加了更多html base.html <html> <body> <script> $(document).ready(function() { $('li.active').removeClass('acti

父页面很好，如下所示：

单击子页面时，其行为与父页面不同：

虽然我在子页面中有base.html，但它不会如我所愿显示出来

我已经尝试了好几种解决方案，但运气不佳，所以希望你能以正确的方式指导我

还是个新手，谢谢你们的帮助，伙计们

编辑：添加了更多html

base.html

<html>
<body>

<script>
$(document).ready(function() {
   $('li.active').removeClass('active');
   $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});
</script>

   <header>
    <nav 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="#menu">
            <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="{% url 'dashboard' %}">Prociation</a>

              <a class="navbar-brand" href="#" id="notifications" data-container="body" data-toggle="popover" data-placement="bottom" title="Notifications">
                <span class="glyphicon glyphicon-home"></span>
              </a>

        </div>
        <div class="collapse navbar-collapse" id="menu">
        <ul class="nav navbar-nav">
            <li  class="active"><a href="{% url 'member_overview' %}">
                 {% trans 'Members' %}</a></li>
            <li><a href="{% url 'docs' %}">
                {% trans 'Documents' %}</a></li>
            <li><a href="{% url 'articles' %}">
               {% trans 'Articles' %}</a></li>
            <li><a href="{% url 'pics' %}">
                {% trans 'Pictures' %}</a></li>
       </ul>
      </div>
    </div>
  </header>
 </body>
</html>
这可能是因为您已经设置了每个[a]标记[href]的[location.pathname]值末尾都有一个反斜杠（例如“/”）后缀值

您可能需要为每个[a]标记[href]值添加反斜杠（例如“/”）

$(document).ready(function() {
    $('li.active').removeClass('active');
    $('a[href="' + location.pathname + '/"]').closest('li').addClass('active');
});
希望这对你的情况有所帮助

编辑：如果用户访问“会员注册”链接，您可能需要有一个条件

例如：

$(document).ready(function() {
    $('li.active').removeClass('active');
    $('a[href="' + location.pathname + '/"]').closest('li').addClass('active');

    if (location.pathname === '/member_signup') {
       $('a[href="member_overview"]').closest('li').addClass('active');
    }
});
当您使用控制台[location.pathname]时，您得到了什么输出？在你的浏览器上，我得到的路径名如上图所示。[“/member\u overview/”]和[“/member\u signup/”]是否检查了
    元素以检查每个标记[href]属性的值？是的，路径名在那里。不，抱歉，它不起作用。甚至导航父页面也不起作用。谢谢您的尝试=）您能更新您的问题并在[html]上添加其他信息吗？编辑的base.html。如果您还需要什么，请告诉我=）让我验证一下。如果您访问（'/member\u signup'）链接，当您在浏览器上检查元素时，您是否在[a]标记中看到[active]类？在（'/member\u signup'）中没有[active]类。你认为这可能是问题所在？它只说
  • ，而家长说
  • $(document).ready(function() {
    $('li.active').removeClass('active');
    $('a[href="' + location.pathname + '/"]').closest('li').addClass('active');
});

    $(document).ready(function() {
    $('li.active').removeClass('active');
    $('a[href="' + location.pathname + '/"]').closest('li').addClass('active');

    if (location.pathname === '/member_signup') {
       $('a[href="member_overview"]').closest('li').addClass('active');
    }
});