在.php页面上使用jquery设置活动链接-不起作用
我尝试了许多建议的jquery代码，最终找到了一个几乎可以工作的代码。
但它有一个缺陷--点击链接后，链接会被取消高亮显示一秒钟(只要页面加载)，然后就会变成活动链接。在页面加载php/html之前，有没有可能在点击后立即突出显示链接？
能找到jquery或javascript的解决方案会很棒，因为它有动画的可能性？让网站/主页菜单动态化的常用方法是什么？
提前感谢！所有的解释或代码示例都会非常棒！
HTML：
<DOCTYPE! html>
<html>
<head>
<title>TESTLEHT</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="naviwrap"><?php include("includes/menu.php"); ?></div>
<div class="clear"></div>
<div class="content"></div>
<div class"footer"><?php include("includes/footer.php"); ?></div>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>包含的菜单文件：
<nav class="menu">
<ul class="clearfix">
<li id="linkone" class="jlist" data-linkid="link1"><a href="index.php">Avaleht</a></li>
<li id="linktwo" class="jlist" class="current-item" data-linkid="link2"><a href="meist.php">Meist</a></li>
<li id="linkthree" class="jlist" data-linkid="ink3"><a href="tooted.php">Tooted</a></li>
<li id="linkfour" class="jlist" data-linkid="link4"><a href="galerii.php">Galerii</a></li>
<li id="linkfive" class="jlist" data-linkid="link5"><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>css：.menu a{过渡:所有线性0.30s；颜色：#ABABAB；字体大小: 16px；文本装饰:无；}
.menu li:hover > a, .menu .current-item > a {
text-decoration: none;
color: red;
}
.menu li:active > a, .menu .current-item > a {
color: red;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 105%;
}
.menu > ul > li > a {
padding: 15px 45px;
margin-top: 15px;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
color: #282828;
}当前的jquery代码，它几乎可以工作：
$(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.current-item').removeClass('current-item');
$(this).parent().addClass('current-item');
}
});
});回答 1
Stack Overflow用户
发布于 2015-07-21 08:10:30
这似乎是网页的正常行为。人们知道，当页面加载时，事情会变得有点时髦。
如果您想了解页面转换的方式，则必须考虑单页面应用程序( Single Page Applications，SPA)，这通常意味着当您单击一个链接时，只加载页面的一部分-这是使用Ajax完成的。它可以像自定义jQuery脚本一样简单，也可以使用更大的框架，如Angular或Backbone，或使用较小的框架，如Sammy JS。
还有一些预制的jQuery脚本，比如jQuery SmoothState，在这些脚本中，您不需要担心创建部分页面。SmoothState将延迟下一页的加载，因为它会秘密加载并检查下一页，并且只会更改页面中不同的区域。它支持动态页面过渡，以及预加载“下一页”(比链接上的鼠标事件更快)，让事情看起来更快一些。
https://en.wikipedia.org/wiki/Single-page_application
http://miguel-perez.com/articles/add-page-transitions-with-smoothstate/
https://stackoverflow.com/questions/31528254
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号