Question

这里的新编码员非常感谢你帮我解决了让我难以接受的问题。

我想编写代码来识别适用于当前页面的链接，并将不同的CSS样式应用于当前链接。我已经研究过这个问题并且发现使用jQuery来识别当前链接然后对它应用一个新类（例如“.current”）是最好的。但是，当我试图在网站上实现它时，它还没有工作。

这是我正在使用的HTML：

<nav class="main-nav">
   <a href="http://website.com" class="main-nav-link">
      <span class="main-nav-item" id="nav-content"></span>
   </a>
   <a href="http://website.com/calendar" class="main-nav-link">
      <span class="main-nav-item" id="nav-calendar"></span>
   </a>
   <a href="http://website.com/profile" class="main-nav-link">
      <span class="main-nav-item" id="nav-profile"></span>
   </a>
</nav>

这是我申请的CSS：

.main-nav .main-nav-item {
  height: 50px;
  width: 150px;
}

.main-nav #nav-content {
  background: url('/images/content-inactive.png') no-repeat center;
}

.main-nav #nav-calendar {
  background: url('/images/calendar-inactive.png') no-repeat center;
}

.main-nav #nav-profile {
  background: url('/images/profile-inactive.png') no-repeat center;
}

我的目标是更改当前页面background:中范围的<a>。

以下是其他一些解决了这个问题的StackOverflow线程，但没有帮助我找到解决方案：

我并不完全清楚我应该在哪里放置Javascript，但我目前在<script type="text/javascript">部分的</script>和<header>之间使用它。

预先感谢您的协助。：）

-

更新

我目前在页面中有以下代码，但它无效。

Javascript：

<script>

      $(document).ready(function() {

     // Get the current URL
            var currentUrl = window.location.href;

            // Get the span you want with a combination class and attribute and child jQuery selector
            var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

            // Then add your class
            currentMenuItem.addClass("current");

        });

</script>

CSS：

#nav-content.current {
  background: url('/images/content-active.png') no-repeat center -94px;
}

jQuery没有将.current类添加到活动链接，因此CSS甚至没有机会工作。

Answer 1

执行此操作的常用方法是在活动页面链接服务器端添加类似“活动”的类。然后你可以使用jQuery来设置元素的样式：

$('.active').css('background-image','images/activebg.png');

但正如您所提到的，您需要为每个“活动”元素设置不同的背景，并且您希望使用该链接。（我想你的意思是URL）。

您可以像这样获取当前页面的网址：

var current_url = window.location.href;

然后，您可以选择包含当前网址的链接，如下所示：

var $link = $('.main-nav a[href='+current_url +']');

现在您可以为当前页面链接设置活动后台，如下所示：

$link.css('background-image','images/activebg.png');

现在，如果您为每个链接设置了自定义活动背景，我建议您创建自己的属性hover_img或您提供悬停网址的内容：

<a href="http://website.com" class="main-nav-link" hover_img="/images/hover-home.png" > ....
<a href="http://website.com/calendar" class="main-nav-link calendar" hover_img="/images/hover-calendar.png"> ....

等等。

然后，您可以将我的最后一行代码更改为：

$link.css('background-image',$link.attr('hover_img'));

Answer 2

window.location.href会获取您当前的网址。然后，您需要使用jQuery选择器，该选择器使用<span class="main-nav-item">属性查找<a class="main-nav-link">元素的href子元素。将你的班级“当前”应用到那个元素，你应该好好去。那么这个JavaScript怎么样：

// Get the current URL
var currentUrl = window.location.href;

// Get the span you want with a combination class and attribute and child jQuery selector
var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

// Then add your class
currentMenuItem.addClass("current");

将它放在脚本标记中并试一试。

一旦有了它，请确保添加适当的CSS规则。例如，添加一个规则，为#nav-content.current加载不同的背景图像（以及其他所有背景图像）。

（关于你当前CSS的说明：看起来你的选择器资格过高了。如果你不必担心页面上任何其他地方的.main-nav-item，请不要打扰这个课程。它之前的.main-nav。您的ID选择器（例如#nav-content）当然不需要限定，因为它们是唯一标识符。）

希望这对你有意义和帮助。

Answer 3

在脚本页面标记内，您可以使用以下内容：

$(document).ready(function() {
    var currentPage = "content"; // <--Change this to the id of your span after the nav-

    //Change the background color now
    $("#nav-" + currentPage).addClass("className");
});

使用jQuery更改当前页面链接的CSS

3 个答案: