After clicking link to change text of a specific paragraph.

Hobbsie · 15 Jun 2017 at 22:12

Hi all sorry im finding this hard to explain.
Also sorry for my bad English in trying to explain.
Ok so i have a webpage that has several questions on lets say 3 for now to make it easy.
All 3 links goto the same page but different points of the landing page.
So when i click on the top question it lands at the 1st answer.
when i click on the 2nd question it goes to same page but lands slightly lower.
and so on as i am putting <a id="q1"></a> around the answers so when i goto the page it adds at the end of the url /#q1

That's working perfectly however as the 3 answers are close together when i goto Q2 you can see Q1 and Q3 answers close by, as the answers are not long.

A competitor of mine is doing something similar but when they land on the Q1,Q2 or Q3 landing page they are highlighting the relevant answer so it stands out more.

Im not sure if this can be done with css or needs java?

I hope i have made some kind of sense?

Thanks

touch · 20 Jun 2017 at 13:18

You'll need to use some javascript to do that with the setup you describe.
But then, if you are going to be using javascript anyway, you could probably do it in a nicer way. For example, have the answers appear under each question when you click on the question rather than loading a new page.

Dj_Jestar · 20 Jun 2017 at 16:34

use the ":target" pseudo class:

Code:

:target {
  background-color: #ffa;
}

e.g: https://jsfiddle.net/31t39Lnj/

touch · 21 Jun 2017 at 17:24

Oh cool. That's a much neater solution!

Hobbsie · 21 Jun 2017 at 21:30

Hi thanks for your replies, not into java so if i can work around that then cool.
So would the :target work on a different page so on the page its opening?
Ill have to have a play.

Thanks All

Hobbsie · 21 Jun 2017 at 22:13

Ok i got it working thanks again for your help.

Dj_Jestar · 23 Jun 2017 at 13:01

Np, and to clarify: add that CSS to the page on which you want the highlighting to occur and it'll work for anything that links to a specific target on that page.