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

Question

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

这是我的一个小问题。基本上我正在为 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 语句，但没有成功。

代码的逻辑如下：

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 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

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

Answer 2

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

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

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

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

这避免了您必须像上面那样动态地执行此操作，这将运行根据 url 和浏览器

出现问题

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

Making Active Page styling different on certain page with jquery/ghost

javascript

css

jquery

ghost

代码的逻辑如下：

if page is home = li style is homeCurrent

if page about = li style is aboutCurrent