Question

我试图关注this example。

我已加载此脚本：

<script>

// current page highlight
    $(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
            }
        });
    });

</script>

在这些文件的<head>部分：index.html（主页），about.html和store.html

this site。无需突出显示服务，而博客和我的帐户目前处于死链接状态。

然后我将相应的类添加到我的CSS中：

.active {
color:#337ab7;
}

因此，当我们访问主页（index.html）时，主页链接应为#337ab7，当我们关注（about.html）时，关键链接应为{{ 1}}，当我们在Store（store.html）上时，商店链接应为#337ab7。

但是现在，仍然没有结果。我需要对JavaScript，CSS或HTML进行哪些更改以使此功能适用？

这里是相关导航菜单的HTML：

编辑：在相关链接中添加了#337ab7课程：

active

这里是live site的链接。谢谢。

Answer 1

<强>解

例如，商店页面：

HTML：

<li><a class="active" href="/store.html">Store</a></li>

CSS：{.navbar-default .navbar-nav > li > a覆盖了.active类，如 doutriforce 所述

.navbar-default .navbar-nav > li > a.active {
color: #337ab7;
}

.navbar-button:hover, a.active {
color: #337ab7;
transition: ease-in-out 0.3s;
}

JavaScript的：

// current page highlight

   // link color code starts
    $(document).ready(function () {
        console.log("current page", window.location.href);
        $("[href]").each(function () {
            $('a[href]:not([href=#])').each(function () {

                if (window.location.href.indexOf($(this).attr('href')) > -1) {
                    console.log($(this).attr('href') +" is active ");
                    $(this).addClass('active');
                }
                else {
                    console.log($(this).attr('href') + "is not active ");
                }
            });
        });
    });
    // link color code ends

然后务必根据文件中活动页面的哪个页面更改哪个<a>链接获取active类 - 即如果您正在编辑login.html，那么您的HTML将会显示像这样：

<li><a href="/store.html">Store</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a class="active" href="/login.html">Login</a></li>

如果您正在编辑blog.php，那么您的HTML将如下所示：

<li><a href="/store.html">Store</a></li>
<li><a class="active" href="/blog.php">Blog</a></li>
<li><a href="/login.html">Login</a></li>

等等。

最后，在index.html（主页）中，请务必在链接文本后添加类sr-only的范围，如下所示：

<li><a href="http://nowordpress.gatewaywebdesign.com/index.html">
Home <span class="sr-only">(current)</span></a></li>

使用Bootstrap隐藏（当前）标签。

Answer 2

无需使用.each()您只需使用选择器

<script>
// current page highlight
    $(document).ready(function() {
       $("a[href*='"+ window.location.href +"']").addClass('active');
    });
</script>

如果您需要了解a[href*='"+ window.location.href +"']选择器的工作原理，只需将a标记为href，如果您将href a更改为window.location.href 1}}这个selctor不会工作..如果是这种情况，你需要使用<a href="/website-design.html">和.each()

.indexOf()

Answer 3

about.html：19 Uncaught SyntaxError：无效或意外的令牌

第19行中有一些奇怪的unicode抛出了解析器错误。您可以在＆＃34; foreach＆＃34;中的chrome检查员中看到它。

清理它可能会解决它。

Answer 4

您的.active班级样式正被班级.navbar-default .navbar-nav > li > a覆盖。

您需要将CSS选择器更具体，从.active更改为.navbar-default .navbar-nav > li > a .active。

关于仅将active类添加到当前访问的href。试试这个：

$('ul.nav > li > a').each(function(){
   var url = window.location.href; //if comparing with full URL
   //var url = window.location.href.pathname; //if comparing with page name (ex. /about.html)
   var href = $(this).prop('href');

   if (url == href) {
     $(this).addClass('active');
   }
});

或者，正如@ Mohamed-Yousef回答的那样，你可以写下：

$("a[href*='"+ window.location.href +"']").addClass('active');

如果您始终将完整网址与完整的Href网址进行比较。

如何更改当前页面链接的颜色 - HTML / CSS / JavaScript

4 个答案: