使用 jquery/ghost 使特定页面上的活动页面样式不同

Question

http://i.stack.imgur.com/Q9OMB.png

这是我的一个小问题。基本上我正在为 Ghost CMS 做一个主题，但我遇到了一个困扰我几个小时的问题，我自己无法解决这个问题，也没有从谷歌找到同类问题的来源/sof 两者都没有。

我的目标是使用 jquery 制作每个页面具有不同样式的活动页面样式（主页为红色，关于蓝色等），因为我无法在 Ghost 本身中完成它，因为它想要旋转具有相同样式的单个循环所有链接。

到目前为止的 Jquery 代码

$(function(){  
  $('a').each(function() {
      if ($(this).prop('href') == window.location.href) {
      $(this).addClass('homeCurrent');}
      });  
});

导航栏的相关HTML

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home "><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about"><a href="/page-about/">About</a></li>
</ul>

我尝试使用 jquery 运行不同类型的 IF 语句，但没有成功。

代码的逻辑如下：

if page is home = li style is homeCurrent

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home homeCurrent"><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about "><a href="/page-about/">About</a></li>
</ul>

if page is about = li style is aboutCurrent

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home"><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about aboutCurrent"><a href="/page-about/">About</a></li>
</ul>

有人吗？

希望我包括了所有相关的内容。

Answer 1

老实说，我会避免使用 window.location.href 比较，因为它只会让我觉得可能会出现问题。

我个人会做的是添加到关于页面的内容：

$(document).ready(function () {
   $('.about').addClass('aboutCurrent');
});

您将该代码添加到您希望添加 xxxCurrent 类的每个页面。

这避免了您必须像上面那样动态地执行它，这将根据 url 和浏览器遇到问题

Answer 2

尝试使用 switch 语句：

$(function () {
    $('a').each(function () {
        var link = $(this).prop('href');
        if (link == window.location.href) {

            switch (link) {
                case "home":
                    $(this).addClass('homeCurrent');
                    break;
                case "about":
                    $(this).addClass('aboutCurrent');
                    break;
                default:
                    $(this).addClass('nothingactive');
            }
        }
    });
});

编辑*

如果你真的想坚持使用这种检查 URL 的方法，你可以这样做：

$(function () {
    $('a').each(function () {
        var base = "http://www.yourdomain.com/";
        var link = base + $(this).prop('href');
        if (link == window.location.href) {

            switch (link) {
                case "http://www.yourdomain.com/home" :
                    $(this).addClass('homeCurrent');
                    break;
                case "http://www.yourdomain.com/about" :
                    $(this).addClass('aboutCurrent');
                    break;
                default:
                    $(this).addClass('nothingActive');
            }
        }
    });
});