在 .php 页面上使用 jquery 设置活动链接 - 不起作用答案

【问题标题】：Setting active link with jquery on .php page - does not work在 .php 页面上使用 jquery 设置活动链接 - 不起作用
【发布时间】：2015-07-20 23:59:52
【问题描述】：

我尝试了许多建议的 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 一个 { 过渡：全线性0.30s；颜色：#ABAB；字体大小：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');
        }
    });
});

【问题讨论】：

尝试将您的 jquery 代码放入 $(document).ready();

标签： php jquery css menu

【解决方案1】：

这似乎是网页的正常行为。人们知道页面加载时会有些奇怪。

如果您想了解页面转换的方式，则必须研究单页应用程序 (SPA)，这通常意味着当您单击链接时，只会加载部分页面 - 这是使用 Ajax 完成的。它可以像自定义 jQuery 脚本一样简单，也可以使用更大的框架（如 Angular 或 Backbone），或者更小的框架（如 Sammy JS）。

还有像 jQuery SmoothState 这样的预制 jQuery 脚本，您无需担心制作部分页面。 SmoothState 会延迟下一页的加载，因为它会秘密加载并检查下一页，并且只会更改页面中不同的区域。它支持动画页面转换，以及预加载“下一页”（比链接上的 mouseup 事件更早）以使事情看起来更快。

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/

【讨论】：