Javascript 在访问包含特定ID的URL时添加CSS

我有一个有多个标题的页面，所有的标题都有自己的ID。这个想法是当你点击一个特定的链接时，它会带你到有标题的页面，并向下滚动到相应的标题。但是，在某些页面上，没有足够的内容供页面向下滚动，也没有足够的内容供页眉指向页面顶部的站点。所以我想突出显示内容引用的标题，这样就可以清楚地知道链接代表了哪些内容

所以链接应该是这样的

http://website.com/test#headerOne

http://website.com/test#headerTwo

一旦你访问了URL，它就会把你放到页面上。但是页面不够长，页眉无法放在页面顶部。因此，我希望能够添加一个背景颜色的标题

更新的HTML：

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

<p>Content here</p>

头一
满足于此

我想知道Jquery需要做些什么，但不确定从哪里开始。我曾考虑检测URL，然后执行if-else语句，但这似乎是一种冗长的方法

任何帮助都将不胜感激

---

谢谢

使用

：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);

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

并使用CSS定义类的详细信息：

.headerHighlight {
    background-color: #ffa;
}

所以我想突出标题

使用

：目标

伪类：

仅举一个示例（带有平滑动画）：

---

通过jquery动态添加css，或者使用add class/remove class methods+1，但不要通过javascript更改

样式。backgroundColor

最好添加具有预定义样式的类。谢谢！抱歉，我没有意识到它实际上是一个a标签，上面挂着#ID。所以它就像头上的单名锚一样应该被移除，因为它们是；在要显示的元素上使用

id

。+1因为答案是正确的，但另一个答案包含了更多的细节。我同意，另一个答案为旧浏览器提供了一些提示。

.headerHighlight {
    background-color: #ffa;
}

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

h2:target {
   background: #000;
}