Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Question

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page?

For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navigate to page B, the link to page A is still shown even though they have already visited it. I am looking for a solution to prevent this from happening but can't seem to find one.

Any assistance on this issue would be greatly appreciated. Thank you.

javascript css html

Answer 1

Answer №1

To achieve a close effect, consider styling the visited link to match the background color like this:

a:link {
  display: block;
}

a:visited {
  color: white;
}

View the example on JsFiddle: http://jsfiddle.net/77nqph63/
Reference:Stackoverflow

UPDATE as per Scott Marcus' recommendation.
JsFiddle demonstration: https://jsfiddle.net/uduv6bgh/
Reference: External Link

Answer 2

To achieve a close effect, consider styling the visited link to match the background color like this:

a:link {
  display: block;
}

a:visited {
  color: white;
}

View the example on JsFiddle: http://jsfiddle.net/77nqph63/
Reference:Stackoverflow

UPDATE as per Scott Marcus' recommendation.
JsFiddle demonstration: https://jsfiddle.net/uduv6bgh/
Reference: External Link

Answer 3

Answer №2

If my understanding is correct, after visiting A, you only want B to show a link to C. In order to achieve this, you can add the following code snippet to your CSS:

a:visited {
  color: white; /* replace with your background color */
}

This solution may be considered a bit of a workaround, as users will still be able to click on the link even though it won't be easily visible.

a:visited {
color: white;
}

Here's a link to Google: <a href="http://google.com">Can you see me?</a>

Answer 4

If my understanding is correct, after visiting A, you only want B to show a link to C. In order to achieve this, you can add the following code snippet to your CSS:

a:visited {
  color: white; /* replace with your background color */
}

This solution may be considered a bit of a workaround, as users will still be able to click on the link even though it won't be easily visible.

a:visited {
color: white;
}

Here's a link to Google: <a href="http://google.com">Can you see me?</a>

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Answer №1

Answer №2

Similar questions

Consistently directing to a single page on the Node Js web server

Utilize React to iterate through a dictionary and display each entry

Position the image in the center of the div both horizontally and vertically

Creating a custom route that is specific to a single ejs file

Auth0 Angular - No routes found to match

The ng-app feature is causing the script to run endlessly

Having trouble inserting an image using Vue?

Add a focus style to the submit button input

The javascript file is unable to detect the presence of the other file

The Google Maps API allows all markers to be connected to a single infowindow

Exploring Ngu-Carousel in Angular 7: Importing JSON data for a dynamic display

Create a duplicate of a React component that utilizes the forwardRef method

How can I extract a substring from a URL and then save it to the clipboard?

Utilize React to update the state of arrays in functional components

Tips for inserting a delay between two separate javascript commands within the same onchange event

Repositioning a jQuery function from inside a plugin

An empty array is being returned by the Model.find() method after sorting

Tips for implementing the JSON object table filter functionality

Avoid having Masonry load all divs simultaneously

Encountering issues while executing a grunt.js task