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

Adding CSS when you access a URL with a specific ID in it

本文关键字：URL 添加 CSS ID 访问      更新时间：2023-09-26

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

任何帮助都将非常感激。

谢谢

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

所以我想突出显示标题。

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

只是一个例子(有一个平滑的动画):

h2 {
   background: none;
   transition: background 3s linear 0; 
}
h2:target {
   background: #000;
}
相关文章：