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

这是我的一个小问题。基本上，我正在为Ghost CMS做一个主题，但我遇到了一个困扰我几个小时的问题，我自己无法解决这个问题，也没有从google/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语句，但没有成功

代码的逻辑如下所示： 如果页面为主页=li样式为主页当前样式 如果页面是关于=li样式是关于当前 有人吗

---

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

尝试使用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');
            }
        }
    });
});

---

老实说，我会避免使用window.location.href比较，因为它只会给我带来潜在的问题

我个人会在about页面的内容中添加以下内容：

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

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

---

这避免了您必须如上所述动态执行操作，这将根据url和浏览器遇到问题

-编辑-我看到你在你的问题中提到了这一点。一次只有一种风格，但它们需要在特定页面上有所不同。这段代码很棒！0根本没有考虑switch语句。这在理论上应该是可行的，但出于某种原因，它一直在导出class=nothingactive。这是因为它失败了。window.location.href将返回您的URL，如：window.location.href=http://www.google.com'; 因此，它可能不匹配任何情况，并运行默认值。顺便说一下，这只是一个例子，你应该根据自己的需要修改它。谢谢你的回答。我以前想过在CSS中手动执行，但Ghost的结构使其不可能/非常困难。这是因为ghost有一个default.hbs页面，该页面具有基本的静态布局，每个页面都没有动态元素，其中包括菜单/页脚n内容@TonyA但是你的about页面的内容应该只对about页面是唯一的。如果您将其添加到“关于”页面的内容中，它将只在那里执行该操作。@TonyA如果您依赖window.location.href，则任何偏差，即about.html？post=true，都将意味着“关于”将不再获得class@CarlK我同意你的看法，但也许OP不能修改结构。@Mikey结构？

$(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');
            }
        }
    });
});

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