带活动链接带下划线错误的导航栏

Question

我有一个导航栏，它的"a“链接重定向到不同的页面。我想要一个带活动链接下划线的导航栏。但是，当我单击其他链接时，它会打开其他页面并执行js函数，但它还是会回过头来(即使其他链接处于活动状态，也会突出显示第一个链接)。我将navbar.html包含在所有页面中，使用包含标记，并为所有html页面提供一个通用的css和js文件。

JS

$('.nav-link').on('click', function() {
    $('.active-link').removeClass('active-link');
    $(this).addClass('active-link');
});

HTML

<div class="navbar-container py-0">
    <ul>
        <li class="nav-link active-link">
            <a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6"
               href="{% url 'screen_1' screen.id %}">
                Screen 1
            </a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
               href="{% url 'screen_2' screen_2.id %}">
                Screen 2
            </a>
            <div class="underline"></div>
        </li>
        <li class="nav-link">
            <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
               href="{% url 'screen_3' screen_3.id %}">
                Screen 3
            </a>
            <div class="underline"></div>
        </li>

    </ul>
</div>

CSS

a {
    outline: none;
}

.navbar-container {
    font-size: 0;
}

.navbar-container ul {
    margin: 0;
    padding: 0;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
}

.navbar-container ul li {
    display: inline-block;
    font-size: 1rem;
}

.navbar-container ul li a {
    color: #000000;
    text-decoration: none;
    display: inline-block;
    transition: color 0.5s;
}

.navbar-container ul li .underline {
    height: 3px;
    background-color: transparent;
    width: 0%;
    transition: width 0.2s, background-color 0.5s;
    margin: 0 auto;
}

.navbar-container ul li.active-link .underline {
    width: 100%;
    background-color: #0c0c0c;
}

.navbar-container ul li:hover .underline {
    background-color: #000000;
    width: 100%;
}

.navbar-container ul li:hover a {
}

.navbar-container ul li:active a {
    transition: none;
    color: rgb(12, 12, 12);
}

.navbar-container ul li:active .underline {
    transition: none;
    background-color: rgb(0, 0, 0);
}

Answer 1

我认为您需要为每个html页面添加js代码，以便将active-link类自动添加到li标记中。

例如：

这是导航条形码：

<div class="navbar-container py-0">
    <ul>
        <li id="screen_1" class="nav-link">
            <a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6"
               href="{% url 'screen_1' screen.id %}">
                Screen 1
            </a>
            <div class="underline"></div>
        </li>
        <li id="screen_2" class="nav-link">
            <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
               href="{% url 'screen_2' screen_2.id %}">
                Screen 2
            </a>
            <div class="underline"></div>
        </li>
        <li id="screen_3" class="nav-link">
            <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
               href="{% url 'screen_3' screen_3.id %}">
                Screen 3
            </a>
            <div class="underline"></div>
        </li>

    </ul>
</div>

我已经删除了所有li标记的active-link类，并为每个标记创建了3个不同的id。

现在，对于每个屏幕1，屏幕2和屏幕3 html页面，只需添加一个代码来设置相应的导航链接的active-link类。

例如，在屏幕1 html页面中：

$("#screen_1").addClass("active-link");

Answer 2

Javascript是在页面加载时执行的，而没有“内存”它在加载之前所做的事情。

因此，如果单击第一页上的链接，则单击将触发指向新页面的链接。当此页面加载时，您使用javascript所做的所有修改都会消失。该页面将不知道，您之前单击的链接和最初的活动链接将是活动的。

这在使用或Vue时可能有所不同，但是对于VanillaJS，这是浏览器的工作方式。

要获得活动链接，可以通过window.location.href检查当前url匹配的链接-href。