Markieren Sie mehr als einen Anker

Ich möchte zwei Abschnitte einer Seite zur gleichen Zeit markieren.Markieren Sie mehr als einen Anker

Zur Zeit habe ich folgendes:

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

und ich kann dieses Fußzeile bitte die folgenden Abschnitte zu verankern und markieren:

<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>

Dies ist die CSS Ich bin mit der ausgewählten hervorzuheben Abschnitt:

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

Derzeit wird es verankern und markieren Sie die Französisch Creole. Wie kann ich beide Abschnitte hervorheben?

Quelle

2017-11-07 Robert

IDs ** muss ** eindeutig sein. – j08691

@ j08691: ja, ich verstehe, aber wie würde ich beide Abschnitt mit dem Footer-Link markieren, die ich habe, und ich habe mit dem Highlight-Teil aktualisiert – Robert

Wenn die Abschnitte highlit sequenziell sind, würde ich sie beide in ein einzelnes Element damit wickeln ICH WÜRDE. Wenn Sie separate, nicht sequentielle Teile der Seite hervorheben müssen, müssen Sie, glaube ich, auf Javascript zurückgreifen. Es gibt keine CSS-basierte Möglichkeit, dies basierend auf einem Link ': target' zu tun. –

Javascript Weg

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

eine Javascript-Funktion aufrufen Onclick Hörer verwenden, bekommen alle Elemente mit Französisch-Klasse als Array und dann Iterieren über sie den Stil zu ändern.

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

CSS Weg „Wenn sie an einem Ort sind“

Beachten Sie die Änderung in href Attribut, Link Jetzt Ziele Eltern div der Elemente ausgewählt werden.

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

Jetzt mehr Kontrolle über die Auswahl, die Sie haben also nur Elemente mit Klasse

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

Wickeln Sie diese p-Tags in einem übergeordneten div mit Zielkennummer

<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>

nun auf diese die CSS ändern Französisch wird hervorgehoben `

Quelle

2017-11-07 20:12:26 Shubham

Markieren Sie mehr als einen Anker

Antwort

Verwandte Themen