3

新编码器在这里，非常感谢您对让我难过的问题的帮助。

我想编写代码来识别适用于当前页面的链接并将不同的 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 甚至没有机会工作。

4

3 回答 3

2

window.location.href将获得您当前的网址。然后，您需要使用 jQuery 选择器来查找具有该属性<span class="main-nav-item">的元素的子元素。将您的课程“当前”应用于该元素，您应该一切顺利。那么这个 JavaScript 怎么样：<a class="main-nav-link">href

// 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）当然不需要限定，因为它们是唯一的标识符。）

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

于 2013-04-16T02:33:15.073 回答
2

执行此操作的常用方法是将“活动”类添加到您的活动页面链接服务器端。然后，您可以使用 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'));
于 2013-04-16T02:22:56.367 回答
1

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

$(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");
});
于 2013-04-16T02:19:13.113 回答