重定向到新页面时如何使 <li> 保持突出显示？答案

【问题标题】：How to make <li> remain highlighted when redirected to new page?重定向到新页面时如何使 <li> 保持突出显示？
【发布时间】：2020-01-22 23:01:10
【问题描述】：

我正在尝试在我的 index.html 中调用导航栏 (navbar.html)。 Navbar.html 有自己的 css，在 navbar.html 里面是一个脚本，当按下<a> 时会改变<li> 的类。

我已经设法使 <li> 更改突出显示，但是当我按下 <a> 时，新页面上不会保持突出显示。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <title></title>
</head>

<body>
    <!--NAVIAGTION BAR-->
    <div id="navbar-placeholder">


    </div>


    <script>
        $(function(){
            $("#navbar-placeholder").load("Files/navbar.html");
        });
    </script>
    <!--END OF NAVIGATION BAR-->
</body></html>

navbar.html

<link rel="stylesheet" href="css/navbar.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div class="navigation">
    <ul>
        <li class=""><a href="work.html">Work</a></li>
        <li class="active"><a href="index.html">Home</a></li>
        <li class=""><a href="contact.html">Contact</a></li>
    </ul>
</div>


<script>
    $(document).ready(function() {
        $(".navigation li").click(function() {
            $(".navigation li").removeClass("active");
            $(this).addClass("active");
        });
    });

</script>

navbar.css

.navigation{
    position: fixed;
    top: 0;
    width: 100%;
    background-color:#262126;
    text-align: center;
}

.navigation ul{
    margin: 0;
}
.navigation li{
    display: inline-block;
    padding: 15px 30px;
    margin: 10px 5px 0px 5px;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
}

.navigation a{
    color: white;
    text-decoration: none;
    text-transform: capitalize;
}

.navigation li:hover{
    background-color: #F2F2F2;
    transition: 0.4s;
}

.navigation li:hover a{
    color: black;
}

.navigation li.active{
    background-color: #F2F2F2;
}
.navigation li.active a{
    color: black;
}

【问题讨论】：

如果页面被重新加载然后看看 localStorage。
您想解析 url，然后在新页面加载时找到合适的href。易于研究如何解析 url。单击链接时没有必要更改当前页面中的类，除非它是单页应用程序
尝试在 url 中使用查询运算符 ? 或锚点 #。然后正如@charlietfl 所说，解析网址。

标签： javascript jquery html css json

【解决方案1】：

逻辑是倒退的。在点击发生时添加类是没有意义的，因为您将立即离开该页面

当每个页面加载匹配当前location.href 到链接并添加类然后。

var $navItems = $(".navigation li").removeClass("active"); 

$navItems.filter(function(){
  return $(this).find('a').prop('href') === location.href;
}).addClass("active");

【讨论】：

在执行此操作时不要忘记删除站点 URL，否则它将不匹配。
@GrahamRitchie 不确定您的意思。 <a> 元素的 href property 是完整的 url .... 如果属性是相对 url，则与属性不同
你刚刚让我大开眼界！谢谢！
>
tfl，在谷歌搜索 4 秒后，我找到了 this this this this this 和无数其他人..