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

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 线程已经解决了这个问题，但没有帮助我找到解决方案:

• Change link color of the current page with CSS
• Dynamically change CSS of link based on current page

我不太清楚我应该把 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

window.location.href 将获取您当前的 URL。然后，您需要使用 jQuery 选择器来查找具有该 <span class="main-nav-item"> 属性的 <a class="main-nav-link"> 元素的 href 子元素。将您的类(class)“当前”应用于该元素，您应该一切顺利。那么这个 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 s，请不要费心用它之前的 .main-nav 来限定该类. 你的 id 选择器(例如 #nav-content )当然不需要限定，因为它们是唯一标识符。)

希望这对您有意义并有所帮助。