访问具有特定ID的URL时添加CSS

Question

我有一个包含多个标题的页面,它们都有自己的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语句,但这似乎是一个冗长的方法.

任何帮助将非常感激.

谢谢

Answer 1

用途: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;
}

Answer 2

所以我想强调标题......

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

只是一个例子(动画流畅):

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

h2:target {
   background: #000;
}