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

Question

我有点震惊，当我加载页面时，它工作正常并使用第一个锚链接相关数据打开。 第1周-信仰...但 Link1"信仰"背景颜色在加载时未激活。请让我知道解决这个问题...

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