Emphasize multiple anchor points

Question

Emphasize multiple anchor points

I am looking to highlight two sections of a page simultaneously.

Here is what I currently have:

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

and I want this footer link to anchor and highlight the following sections:

<p id="French"><strong>French Creole</strong><br />
    ATTENTION: Special language services are available for you if you speak Haitian Creole. Call 1-321-268-6111. (TTY: 1-800-955-8771)</p>

<p id="French"><strong>French</strong><br />
    ATTENTION: If you speak French, free language assistance services are available to you. Call 1-321-268-6111. (TTY: 1-800-955-8771)</p>

This is the CSS code being used to highlight the selected section:

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

Currently, only French Creole is being highlighted. How can I adjust it to highlight both sections?

html css

Answer 1

Answer №1

Javascript Approach

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

Utilizing an onclick listener in Javascript to call a function, fetching all elements with the 'French' class as an array, and then looping through them to modify their styles.

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

CSS Method "If they are at the same location"

Observe the modification in the href attribute, now the link directs to the parent div of the selected elements.

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

Enclose these p tags within a parent div with the id 'targetarea'

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

Update the CSS to this

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

Enhanced control over selection achieved, where only elements with the class 'French' will be highlighted. `

Answer 2

Javascript Approach

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

Utilizing an onclick listener in Javascript to call a function, fetching all elements with the 'French' class as an array, and then looping through them to modify their styles.

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

CSS Method "If they are at the same location"

Observe the modification in the href attribute, now the link directs to the parent div of the selected elements.

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

Enclose these p tags within a parent div with the id 'targetarea'

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

Update the CSS to this

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

Enhanced control over selection achieved, where only elements with the class 'French' will be highlighted. `

Emphasize multiple anchor points

Answer №1

Similar questions

Code snippet for replacing text enclosed between two tags using regex in PHP programming language

What factors could potentially cause Internet Explorer to fail in processing conditional comments effectively?

The keyframe spinner fails to function properly on Firefox and results in blurry text

Alignment of text varies between canvas and HTML

Guide to continuously play the animation, Version 2

Achieving a 100% width input with Flexbox: Tips and tricks for success

How can I modify the table structure in Ruby on Rails?

Learn how to display a "not found" message in a React.js application

The dropdown feature functions properly on Chrome but seems to be malfunctioning on

Guide to resetting a CSS animation with pure JavaScript

Tips for ensuring that the <input type="file"> element only allows the selection of .pdf files

Calculating square roots in AngularJS

Angular: Updating image tag to display asynchronous data

Is there a way to verify the presence of a specific word within a classname?

The responsiveness of Slick Slider's breakpoints is malfunctioning

What methods can be used to cloak JavaScript functions from the end user?

Centralized Column Design with Bootstrap 4

Ways to transfer JavaScript arguments to CSS style

Replacing HTML elements with PHP's str_replace function

Align select and number inputs vertically in Firefox