重定向到新页面时如何使 <li> 保持突出显示？
Posted
技术标签:
【中文标题】重定向到新页面时如何使 <li> 保持突出显示？【英文标题】：How to make <li> remain highlighted when redirected to new page? 【发布时间】：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 所说，解析网址。
【参考方案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 和无数其他人..以上是关于重定向到新页面时如何使 <li> 保持突出显示？的主要内容，如果未能解决你的问题，请参考以下文章