访问过的菜单选项未突出显示答案

【问题标题】：Visited menu option is not getting highlighted访问过的菜单选项未突出显示
【发布时间】：2015-12-19 17:19:38
【问题描述】：

所以我一直在看这个 jquery 插件，它突出显示当前页面上的当前菜单项。我目前希望菜单项边框和文本改变颜色。我试图在其中实现这一点的 CSS 方法是 .selected 我在这里可能真的很傻，但是我似乎无法让它工作。任何帮助将非常感激。我的 JS 被放在一个单独的文件夹中。

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="js/pageMenu.js" type="text/javascript" ></script>

<div class="container">
    <header class="site-header">
        <img id="logo" src="logo.png" alt="logo">
           <nav id="nav"<a href="#"></a>
       <ul id="site-nav">
        <li><a href="index.php">Home</a>
        </li>
         <li><a href="#">Used Cars</a>
         </li>
         <li><a href="aboutus.php">About us</a>
         </li>
         <li><a href="#">Contact Us</a>
       </li>
    </ul>
</nav>

这里是 JS

$(document).ready(function(){
$('#site-nav a').each(function(index) {
    if(this.href.trim() == window.location)
        $(this).addClass("selected");
  });
});

最后是 CSS（我知道这是一团糟）

#site-nav {
margin: 0px;
padding: 0px;
line-height: 1;
}

#site-nav li {
float: left;
list-style: none;
}

#site-nav li a:link, #site-nav li a:visited {
font-family: 'Pontano Sans', sans-serif;
font-size:14px;
font-weight: bold;
display: block;
padding: 12px 17px;
text-decoration: none;
border-radius: 0px 0px 8px 8px;
/* horizontal radius / vertical radius */
list-style: none;
border-style: outset;
border-width: 1px;
background: #FFFFFF;
background: rgba(226, 226, 226, 1);
background: -moz-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219,      219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226, 226, 226, 1)), color-stop(3%, rgba(219, 219, 219, 1)), color-stop(51%, rgba(209, 209, 209, 1)), color-stop(100%, rgba(254, 254, 254, 1)));
background: -webkit-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: -o-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: -ms-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0);
}

 #site-nav a:focus, #site-nav a:hover {
color: #DC2F35;
background-color: #FFFFFF;
}
.selected {
color: #DC2F35;
border-color: #DC2F35;
}

【问题讨论】：

你能把这个贴在 jsfiddle 里吗？实际发生了什么而不是预期的行为？
似乎是work fine in jsFiddle（请注意我更改了其中一个的链接地址，因此它会被选中）。尝试打开控制台（在 chrome 上按 ctrl+alt+j），您是否遇到任何错误？也许您没有正确导入您的 javascript 文件...
当我使用 # 时它工作正常，因为我没有链接到新页面。一旦我从 index.php 导航到 aboutus.php，导航栏中的 about us 似乎并没有从 .selected 中获取格式它适用于 index.php，但仅此而已
由于 jsfiddle 的工作方式，域会随着每次更新而改变，所以这里有一个 updated version，在你按一次“运行”后应该可以工作（这与你的代码无关）。我还重新设计了您的链接，使其更加现代（我这样做是为了好玩，您可以复制我的设计，但不要被它弄糊涂，这完全无关紧要！）
@user3697474 所以您的问题可能是您没有将脚本或 css 文件导入 aboutus.php。再次，您能否打开控制台并告诉我您是否看到任何错误？

标签： javascript jquery html css web

【解决方案1】：

不出所料，我其实很傻。该代码有效，但是我没有在我的其他文件中正确链接 javascript

【讨论】：

【解决方案2】：

您可能应该在构建菜单的 php 中添加选定的类。这将阻止您的页面上出现任何FOUC。

我不知道这是否是错误的形式，但我会将您链接到此答案： How to have the class="selected" depending on what the current page/url is

【讨论】：

【解决方案3】：

问题在于您的 if 块条件，因为 JavaScript 不允许您使用 == 运算符比较字符串。您必须使用 localeCompare() 函数来比较字符串。
例如：-
var str1 = "cd";
var str2 = "ab";
var n = str1.localeCompare(str2);

如需更多信息，您可以查看this

【讨论】：