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

Changing CSS for link of current page with jQuery

本文关键字：链接 CSS 当前页 jQuery 使用      更新时间：2023-09-26

我是新来的程序员，如果你能帮助我解决一个让我难倒的问题，我将非常感激。

我想写代码，将识别应用于当前页面的链接，并应用一个不同的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;
}

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

这里有一些其他的StackOverflow线程已经解决了这个问题，但还没有帮助我达到一个解决方案:

  • 用CSS
    • 改变当前页面的链接颜色
  • 基于当前页面动态更改链接的CSS

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

提前感谢您的协助。:)

,

更新:

我目前在页面中有以下代码，但它不工作。

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甚至没有机会工作。

window.location.href将获得您当前的URL。然后，您需要使用一个jQuery选择器来查找具有该href属性的<a class="main-nav-link">元素的<span class="main-nav-item">子元素。将类"current"应用于该元素，应该就可以了。那么这个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)当然不需要被限定，因为它们是唯一的标识符。

希望对你有帮助。

通常的方法是在你的活动页面链接服务器端添加一个类，比如"active"。然后，您可以使用jQuery设置元素的样式，如下所示:

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

但是正如您所提到的，您需要为每个"活动"元素使用不同的背景，并且您希望使用该链接。(我想你是指URL)。

你可以像这样获取当前页面的URL:

var current_url = window.location.href;

你可以像这样选择当前URL的链接:

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

现在你可以像这样设置当前页面链接的活动背景:

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

现在，如果你有一个自定义的活动背景的每个链接，我建议你创建自己的属性hover_img或你提供的悬停url:

<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'));

在您的脚本页面标签中，您可以使用以下内容:

$(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");
});
相关文章：