jquery - 加载第一个锚链接背景颜色更改

Question

我有点震惊，当我加载页面时，它工作正常并打开第一个锚链接相关数据。week1-faith ...但是Link1“Faith”背景颜色在Onload时没有激活。请让我知道解决这个问题...

Answer 1

嗨，像这样在第一个链接中添加活动类

<li class="link week1-faith active" rel="#faith"><a href="#week1-faith">FAITH</a></li>

在你的 js 文件中更新

在文件中添加一行

$('.coda-nav > ul > li:first').addClass('active'); //**********Add This line in your js*************//

在javascripts/modules.js

// Script for chapters of MODULE 1
$(function() {
$('div.panel').hide();
$('.coda-nav > ul > li:first').addClass('active'); //**********Add This line in your js*************//
$('div.panel:first').addClass('active').show(); // Keeps the first one on
$('li.link').click(function() { // When an item is clicked

Answer 2

有了这个：

(function($){
    var hash = window.location.hash;
    $('a[href$='+ hash +']').addClass('active');
})(jQuery);

然后在你的css中主动改变背景。

我已经在您的页面中尝试了选择器并且运行良好:)

Answer 3

我不太擅长 css 但

你有这个CSS

.coda-nav ul li.active a {
    background: none repeat scroll 0 0 #287ED6;
    color: #EDEDED;
}

还有这个

#leftmenu ul li {
    height: 143px;
    list-style: none outside none;
    margin: 0;
    padding-top: 15px;
    width: 143px;
}
#leftmenu ul li a:link, a:hover, a:visited, a:active {
    color: #FFFFFF;
    font-size: 16px;
    text-decoration: none;
    text-shadow: 1px 1px #666666;
}

我认为有覆盖css所以建议通过css或javascript解决这个问题

e.g element.className = 'newClassName';

链接 JavaScript 教程 - DOM CSS

更新：

并确保发生了什么，以及您在做什么，请使用链接中的getComputedStyle方法查看示例

Answer 4

如果您想在重新加载页面背景颜色更改archer tab <a>后使用此代码。

$("a").each(function() {
    if ((window.location.pathname.indexOf($(this).attr('href'))) > -1) {
        $(this).addClass('activeMenuItem');
    }
});