Question

我想同时突出显示页面的两个部分。

目前我有以下内容：

<li class="langLI" style="list-style-type:none"><a href="/non-discrimination-and-language-assistance##French">| French Creole</a></li>

我想要这个页脚链接来锚定并突出显示以下部分：

<p id="French"><strong>French Creole</strong><br />
    ATANSYON: Si w pale Krey&ograve;l Ayisyen, gen s&egrave;vis &egrave;d pou lang ki disponib gratis pou ou. Rele 1-321-268-6111. (TTY: 1-800-955-8771)</p>

<p id="French"><strong>French</strong><br />
    ATTENTION: Si vous parlez fran&ccedil;ais, des services d'aide linguistique vous sont propos&eacute;s gratuitement. Appelez le 1-321-268-6111. (TTY: 1-800-955-8771)</p>

这是我用来突出显示所选部分的CSS：

    #French:target{
     background-color: #ffa;
    -webkit-transition: all 1s linear;
}

目前，它将锚定并突出法国克里奥尔语。如何突出显示这两个部分？

Answer 1

Javascript方式

<li class="langLI" style="list-style-type:none"><a onclick="mulselect()">| French Creole</a></li>

使用onclick侦听器调用javascript函数，将所有带有法语类的元素作为数组，然后迭代它们以更改样式。

function mulselect(){
    french=document.getElementsByClassName("French");
    for( i in french ) {
  french[i].style.backgroundColor = 'yellow';
}

CSS方式＆＃34;如果他们在一个地方＆＃34;

请注意href属性的更改，现在将目标链接到要选择的元素的父div。

<li class="langLI" style="list-style-type:none"><a href="#targetarea">| French Creole</a></li>

将这些p标签包装在目标ID为

的父div中

<div id="targetarea">
<p class="French"><strong>French Creole</strong><br />
ATANSYON: Si w pale Krey&ograve;l Ayisyen, gen s&egrave;vis &egrave;d pou lang ki disponib gratis pou ou. Rele 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p class="French"><strong>French</strong><br />
ATTENTION: Si vous parlez fran&ccedil;ais, des services d'aidelinguistique vous sont propos&eacute;s gratuitement. Appelez le 1-321-68-6111. (TTY: 1-800-955-8771)</p>
<p class="English"><strong>French</strong><br />
ATTENTION: Si vous parlez fran&ccedil;ais, des services d'aidelinguistique vous sont propos&eacute;s gratuitement. Appelez le 1-321-68-6111. (TTY: 1-800-955-8771)</p>
</div>

现在将CSS更改为此

#targetarea:target .French{
 background-color: #ffa;
-webkit-transition: all 1s linear;

现在您可以更好地控制选择，即仅突出显示具有法语类的元素 `

突出显示多个锚点

1 个答案: