0

我有一个包含多个标题的页面，它们都有自己的 ID。这个想法是，当您单击特定链接时，它会将您带到带有标题的页面并向下滚动到适当的标题。但是，在某些页面上，没有足够的内容让页面向下滚动以及页面顶部的标题到站点。所以我想突出显示内容引用的标题，以便清楚链接代表哪些内容。

所以链接会是这样的

http://website.com/test#headerOne

http://website.com/test#headerTwo

然后，一旦您访问了 URL http://website.com/test#headerOne，它就会将您带到页面上。但是页面的长度不足以使页眉位于页面顶部。所以我希望能够为标题添加背景颜色。

更新的 HTML：

<h3> Header One </h3>
<a name="headerOne"></a>

<p>Content here</p>

我认为一些 Jquery 需要做，但不确定从哪里开始。我正在考虑检测 URL，然后执行 if else 语句，但这似乎是一种冗长的方法。

任何帮助将非常感激。

谢谢

4

2 回答 2

6

使用:target：

/* I'm obviously assuming you're using h2 elements for headers,
   but adjust to taste */
h2:target {
    background-color: #ffa;
}

或者，如果您需要在不:target支持的情况下支持旧版浏览器：

var el = document.getElementById(document.location.hash);
el.style.backgroundColor = '#ffa';

而且，有一个功能：

function hashChanged(){
    var el = document.getElementById(document.location.hash);
    el.style.backgroundColor = '#ffa';
}

document.addEventListener('hashChange', hashChanged, false);

或者，使用类（正如@Fabrizio所建议的，我应该想到自己）：

function hashChanged(){
    var el = document.getElementById(document.location.hash),
        highlight = 'headerHighlight';
    document.querySelector('.' + highlight).classList.remove(highlight)
    el.classList.add(highlight);
}

document.addEventListener('hashChange', hashChanged, false);

并使用 CSS 来定义类的细节：

.headerHighlight {
    background-color: #ffa;
}
于 2013-06-14T11:00:13.320 回答
5

所以我想突出标题...

使用:target伪类：http ://css-tricks.com/on-target/

只是一个例子（带有流畅的动画）：

h2 {
   background: none;
   transition: background 3s linear 0; 
}

h2:target {
   background: #000;
}
于 2013-06-14T11:00:33.477 回答