我尝试了许多建议的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;字体大小:16 px;文字修饰:没有;}
.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');
}
});
});
这似乎是一个网页的正常行为。人们知道当页面加载时，事情会变得有点古怪。
如果您想了解页面转换的方式，您必须查看单页应用程序(SPA)，这通常意味着当您单击链接时，只加载页面的一部分—这是使用Ajax完成的。它可以像自定义jQuery脚本一样简单，或者使用像Angular或Backbone这样的大框架，或者像Sammy JS这样的小框架。
也有预制的jQuery脚本，如jQuery SmoothState，在那里你不需要担心制作部分页面。SmoothState将延迟加载下一页，因为它秘密地加载和检查下一页，并且只更改页面的不同区域。它支持动画页面过渡，以及预加载"下一页"(比链接上的鼠标事件更快)，使事情看起来快一点。
https://en.wikipedia.org/wiki/Single-page_application https://angularjs.org/http://backbonejs.org/http://sammyjs.org/http://miguel-perez.com/articles/add-page-transitions-with-smoothstate/