新编码器在这里,非常感谢您对让我难过的问题的帮助。
我想编写代码来识别适用于当前页面的链接并将不同的 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 甚至没有机会工作。