Question

我正在尝试使用jQuery在导航栏中为当前选定的链接加下划线，此处的代码https://jsfiddle.net/9bkh4w8s/1/正常工作（您必须扩展输出）。下面的代码不是：

html（在jsfiddle中将href的值设置为'#'，这里有实际值）：

<nav class="navbar">
        <a class="navbar-brand" href="{% url 'index' %}">JobBoard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                {% if user.is_authenticated == False %}
                <li class="nav-item active">
                <a class="nav-link right-link" href="% url 'index' %}">Job Search<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="{% url 'employer_signup' %}">Post a Job<span class="sr-only">(current)</span></a>
                </li>
            </ul>
                {% endif %}
<!-- set of links to be displayed if user is logged in intentionally omitted-->
        </nav>

css（与jsfiddle相同）：

.active{
  position:relative;
}
.active:after{
  content:'';
  position:absolute;
  width:100%;
  height:1px;
  background:#000;
  left:0;
  top:100%;
  margin-top:.5rem;
}

jquery（与jsfiddle相同）：

$(document).ready(function(){
    $('li').click(function(){
        $('li').removeClass('active');
        $(this).addClass('active');
    })

});

当我单击“职位发布”链接时：

<a class="nav-link" href="{% url 'employer_signup' %}">Post a Job<span class="sr-only">(current)</span></a>

将我带到正确的页面，但“求职”链接仍带有下划线，而不是“发布工作”链接。这和jsfiddle之间的唯一区别是，我实际上已被带到一个新页面。没有人知道为什么href具有实际值时，这种方法不再起作用吗？

Answer 1

由于该链接将重定向到新页面，因此将内容刷新为其原始设置。您可以使用网址将导航链接设置为活动状态。

使用jQuery突出显示当前选中的链接

1 个答案: