Member Avatar for Violet_82

HI all, not long ago I posted something about a similar issue http://www.daniweb.com/web-development/web-design-html-and-css/threads/447728/change-the-colour-of-visited-link-with-avisited
but this time it is slightly different. Ok, so here's the offending page

When you click on the question, the answer will slide down. Now, the links will always point to #, but I still need them to change colour when clicked on, and take the visited colour. From previous post I have learned that the fact that links point to # might be a problem, how do I get around it please?
The links have this styles in this order:

/*STYLED LINKS*/
a.linkStyle:link{
    color:#2a00ff;
}
a.linkStyle:visited{
    color:#ff00ae;
}
a.linkStyle:hover{
    color:#333333;
}
a.linkStyle:active{
    color:#2a00ff;
} 
/*STYLED LINKS*/

Here's the full relevant code:

HTML:

<!-- START OF MAIN CONTENT -->
            <div id="content">
                <div id="theContent">
                    <h1>Frequently asked faqs</h1>
                    <p class="faq"><a href="#" class="linkStyle">Question n1</a></p>
                    <p class="answ">
                    This is the answ to the 1st FAQ faq that has been clicked to show how the answ would display. This is 
                    the answ to the FAQ faq that has been clicked to show how the answ would display.
                    </p>
                    <p class="faq"><a href="#" class="linkStyle">Question2?</a></p>
                    <p class="answ">This is the answ to the 2st FAQ faq that has been clicked to show how the answ would display. This is 
                    the answ to the FAQ faq that has been clicked to show how the answ would display.
                    </p>
                    <p class="faq"><a href="#" class="linkStyle">Question3?</a></p>
                    <p class="answ">This is the answ to the 3rd FAQ faq that has been clicked to show how the answ would display. This is 
                    the answ to the FAQ faq that has been clicked to show how the answ would display.</p>
                    <p class="faq"><a href="#" class="linkStyle">Question4?</a></p>
                    <p class="answ">This is the answ to the 4th FAQ faq that has been clicked to show how the answ would display. This is 
                    the answ to the FAQ faq that has been clicked to show how the answ would display.</p>

                </div>



            </div><!-- end of content-->          
            <!-- END OF MAIN CONTENT -->

CSS:

...
/* faqS AND answS BOX */
#content #theContent p.answ{
    display:none;
    margin:3px 0 6px 0;
}
#content #theContent p.faq{
    margin:0;
    line-height:1.857142857142857em;
}

...
  • 3 Contributors
  • 5 Replies
  • 234 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Quick summary for : the reason your FAQ links don’t take the :visited colour is usually one of two things — the link only points at # (no real fragment to record in history) or your click handler prevents the browser from actually navigating (so the URL never becomes a visited entry). Modern browsers also restrict what :visited can change (you can depend on colour, but not things like content or transforms). (developer.mozilla.org)

Two practical fixes (pick one):

  • Let the browser record the fragment. Give each answer an id (don’t use the obsolete name on non-anchor elements), point the question link at that id, and don’t block the navigation — or after your slide animation, update the hash so the URL is added to history. That makes the link target a proper visited URL. Use location.hash (or set the hash after your animation) to update the URL. (developer.mozilla.org)

  • If you must intercept clicks (prevent page jump) keep the JS behaviour but explicitly mark the clicked link as “visited” by adding a class and styling that class in CSS. This is the common, cross-browser workaround when the browser never records the href in history. Example CSS/JS (keeps your existing JS slide logic):

/* JS-added "visited" style */
.linkStyle.visited-js { color: #ff00ae; }
document.querySelectorAll('.linkStyle').forEach(a => {
  a.addEventListener('click', function () {
    this.classList.add('visited-js'); // mark it visually visited
    // run your slide toggle code here
  });
});

This approach is recommended when your click handler prevents the link from being visited by the browser. (stackoverflow.com)

Small tips: keep LVHA order (:link → :visited → :hover → :active) if you use those pseudo-classes, prefer a.linkStyle or a[href] selectors for clarity, and prefer id on the answer element rather than name.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

From previous post I have learned that the fact that links point to # might be a problem, how do I get around it please?

What do you mean by a problem? Sorry, I still dont understand what you are actually trying to accomplish.

Member Avatar for migcosta

hey Violet_82,
you need to use different hashtags for that:

<p class="faq"><a href="#question1" class="linkStyle">Question n1</a></p>
<p class="answ" name="question1">
This is the answ to the 1st FAQ faq that has been clicked to show how the answ would display. This is
the answ to the FAQ faq that has been clicked to show how the answ would display.</p>

<p class="faq"><a href="#question2" class="linkStyle">Question2?</a></p>
<p class="answ" name="question2">
This is the answ to the 1st FAQ faq that has been clicked to show how the answ would display. This is
the answ to the FAQ faq that has been clicked to show how the answ would display.</p>

don't forget the name on the <p>.. this way external linking will point to the correct point
take a look at this:

cheers

Member Avatar for Violet_82

Sorry, maybe I wasn't clear.
: The questions shold ideally change colour when clicked on them and take the visited link colour as detailed in the css. At the moment they don't, they retain their original colour.
, thanks for that, I wasn't aware this was the right way to do it. I have amended it now but I still have the same problem, in that, as described above, the colour of the clicked on question, doesn't change to a visited link. It should change from 2a00ff to ff00ae. How do I achieve that

Member Avatar for migcosta

hey Violet_82
I'm seeing it the right way (I think.. :) ) please take a look ate the print screen.
Violet_82_screen1
I you still have this problem, please change this:

a.linkStyle:link{

to this

a.linkStyle {

you don't really kneed the ":link" (I never use it and don't think that is a very logical "tag" to use)
cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.