CSS-当id链接到使用锚点时突出显示div?

时间:2022-11-03 08:35:08

What I am attempting to do is to highlight a div with a certain id, when It has been referred to by an anchor on another page IE:

我试图做的是突出显示具有特定id的div,当它被另一个页面IE上的锚引用时:

User clicks link href="qw.html#test", when the page is loaded, then the div with the id="test" is highlighted so that the user can see it clearly.

用户点击链接href =“qw.html #test”,加载页面时,会突出显示id =“test”的div,以便用户可以清楚地看到它。

I'm sure that I've seen a CSS3 example where a div is highlighted if it was linked to. Or was it JavaScript?

我确信我已经看过一个CSS3示例,如果链接到div,则突出显示div。还是JavaScript?

3 个解决方案

#1


88  

You need to use the :target pseudo-class:

您需要使用:target伪类:

:target {
   background-color: #ffa;
}

JS Fiddle demo.

JS小提琴演示。

#2


-1  

Javascript can be used to dynamically add/change the class of the div:

Javascript可用于动态添加/更改div的类:

If you have:

如果你有:

<div id="test"></div>

Javascript function, executed by the click of the anchor:

Javascript函数,通过单击锚点执行:

document.getElementById("test").className += " highlighted";

Result:

结果:

<div id="test" class=" highlighted"></div>

#3


-1  

You can do this in JavaScript. Refer to How to get the anchor from the URL using jQuery? on how to get the anchor from URL and then it can be something simple like

你可以用JavaScript做到这一点。请参阅如何使用jQuery从URL获取锚点?关于如何从URL获取锚点然后它可以是简单的东西

document.getElementById(hash).style.backgroundColor="Yellow";

#1


88  

You need to use the :target pseudo-class:

您需要使用:target伪类:

:target {
   background-color: #ffa;
}

JS Fiddle demo.

JS小提琴演示。

#2


-1  

Javascript can be used to dynamically add/change the class of the div:

Javascript可用于动态添加/更改div的类:

If you have:

如果你有:

<div id="test"></div>

Javascript function, executed by the click of the anchor:

Javascript函数,通过单击锚点执行:

document.getElementById("test").className += " highlighted";

Result:

结果:

<div id="test" class=" highlighted"></div>

#3


-1  

You can do this in JavaScript. Refer to How to get the anchor from the URL using jQuery? on how to get the anchor from URL and then it can be something simple like

你可以用JavaScript做到这一点。请参阅如何使用jQuery从URL获取锚点?关于如何从URL获取锚点然后它可以是简单的东西

document.getElementById(hash).style.backgroundColor="Yellow";