Keep link that is clicked on in active state until another link is clicked

Question

0.00/5 (No votes)

See more:

, +

I need to keep a link in the active state (with the relevant styling applied) until another link is clicked. In this sense, the a:focus works in the way I want my links to behave when clicked on, but when I click off the link anywhere else, including elsewhere on the page like the body or another div, that link looses it's focus (as expected, but need my link clicked on to keep its focus and loose its focus when only another link is clicked on, and not loose its focus when clicked on anything else other than another link). I've tried a:active and placed it after a:hover but this does not work. I would prefer a CSS only implementation but if one does not exist, I am open to a JavaScript implementation (plain, vanilla JS only, no JQuery or other libraries or frameworks). I am currently using a JavaScript onclick() function to display certain divs when specific links are clicked on, and have included it in this post in case it is overriding the CSS.

What I have tried:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="fragment" content="!">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./style.css" type="text/css" rel="stylesheet" />
  <script src="./script.js" type="text/javascript"></script>
  <title>websitename | Home</title>
</head>

<body>
  <div id="content-wrapper">
    <header>
      <nav class="nav">
        <h1><a id="linkHome" href="index.html">websitename</a> | <span id="contentHeading">home</span></h1>
        <h3>Just a simple blog site.</h3>

        <a id="showAbout" class="show" onclick="contentChange('about');">❴about❵</a>

        <a id="showPortfolio" class="show" onclick="contentChange('portfolio');"
          onclick="clickSingleA(this)">❴portfolio❵</a>

        <a id="showResume" class="show" onclick="contentChange('resume');">❴resume❵</a>

        <a id="showContact" class="show" onclick="contentChange('contact');">❴contact❵</a>

        <a id="showBlog" class="show" onclick="contentChange('blog');">❴blog❵</a>
      </nav>
    </header>

    <main>

      <div id="contentHome" class="content">
        home, latest posts etc...
      </div>

      <div a id="contentAbout" class="content">
        About me...
      </div>

      <div a id="contentPortfolio" class="content">
        My portfolio:
      </div>

      <div a id="contentResume" class="content">
        My work experience:
      </div>

      <div a id="contentContact" class="content">
        <p>You can contact me using:
        </p>
        <p>
          email@domainname.com
        </p>
        or the contact form below:
        <form class="field"></form>
        <p>
          <label for="inputName">Name</label>
          <br>
          <input type="text" id="inputName" class="field" required>
        </p>
        <p>
          <label for="inputEmail">eMail</label>
          <br>
          <input type="email" id="inputEmail" class="field" required>
        </p>
        <p>
          <label for="inputMessage">Message</label>
          <br>
          <textarea id="inputMessage" rows="16" cols="64" class="field" required></textarea>
        </p>
        <p>
          <input type="submit" id="inputSubmit" class="field" value="Send">
        </p>
        </form>
      </div>

      <div id="contentBlog" class="content">
        Here are blog post listings
      </div>
    </main>

    <footer>
      <nav class="nav">
        <p>
          <a href="index.html#terms">[terms]</a>
          <a href="index.html#privacy">[privacy]</a>
          <a href="index.html#disclaimer">[disclaimer]</a>
          <a href="index.html#webmaster">[webmaster]</a>
        </p>
      </nav>
      <p>
        Copyright ©
        <script>document.write(new Date().getFullYear())</script> websitename
        <br>
        All Rights Reserved
      </p>
    </footer>
  </div>
</body>

</html>

CSS

#content-wrapper {
  margin-right: auto;
  margin-left: auto;
  max-width: 960px;
  text-align: justify;
  align-content: center;
  font-family: monospace;
}

header {
  display: block;
  background-color: white;
  border-bottom-style:dotted;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: sticky;
  text-align: center;
  color: black;
  top: 0;
  padding-bottom: 1rem;
}

#contentHeading{
  cursor:pointer;
}

a, a:link, a:visited, a:hover{
  text-decoration: none;
  color: black;
}

a:hover,
a:active{
  cursor: pointer;
  font-weight: bold;
  font-size: large;
}

.content{
  display: none;
}

.field {
  font-family: monospace;
}

#contentContact{
  text-align: center;
  align-content: center;
}

button, input[type="submit"] {
  background: none;
  color: inherit;
  border: solid;
  padding: 0;
  font: inherit;
  outline: inherit;
  font-size: medium;
  font-weight: bold;
  cursor:pointer;
}

footer {
  display: block;
  font-family: monospace;
  border-top-style: dotted;
  text-align: center;
  background: white;
  padding-bottom: 1rem;
}

JavaScript

function contentChange(value) {
  switch (value) {
    case "about":
      document.getElementById("showAbout").style.fontStyle = "bold";
      document.title = "matman.xyz | About";
      document.getElementById("contentHeading").innerHTML = "About";
      document.getElementById("contentAbout").style.display = "block";
      document.getElementById("contentHome").style.display = "none";
      document.getElementById("contentPortfolio").style.display = "none";
      document.getElementById("contentResume").style.display = "none";
      document.getElementById("contentContact").style.display = "none";
      document.getElementById("contentBlog").style.display = "none";
      break;
    case "portfolio":
      document.title = "matman.xyz | Portfolio";
      document.getElementById("contentHeading").innerHTML = "Portfolio";
      document.getElementById("contentPortfolio").style.display = "block";
      document.getElementById("contentHome").style.display = "none";
      document.getElementById("contentAbout").style.display = "none";
      document.getElementById("contentResume").style.display = "none";
      document.getElementById("contentContact").style.display = "none";
      document.getElementById("contentBlog").style.display = "none";
      break;
    case "contact":
      document.title = "matman.xyz | Contact";
      document.getElementById("contentHeading").innerHTML = "Contact";
      document.getElementById("contentContact").style.display = "block";
      document.getElementById("contentHome").style.display = "none";
      document.getElementById("contentAbout").style.display = "none";
      document.getElementById("contentPortfolio").style.display = "none";
      document.getElementById("contentResume").style.display = "none";
      document.getElementById("contentBlog").style.display = "none";
      break;
    case "resume":
      document.title = "matman.xyz | Resume";
      document.getElementById("contentHeading").innerHTML = "Resume";
      document.getElementById("contentResume").style.display = "block";
      document.getElementById("contentHome").style.display = "none";
      document.getElementById("contentAbout").style.display = "none";
      document.getElementById("contentPortfolio").style.display = "none";
      document.getElementById("contentContact").style.display = "none";
      document.getElementById("contentBlog").style.display = "none";
      break;
    case "blog":
      document.title = "matman.xyz | Blog";
      document.getElementById("contentHeading").innerHTML = "Blog";
      document.getElementById("contentBlog").style.display = "block";
      document.getElementById("contentHome").style.display = "none";
      document.getElementById("contentAbout").style.display = "none";
      document.getElementById("contentPortfolio").style.display = "none";
      document.getElementById("contentResume").style.display = "none";
      document.getElementById("contentContact").style.display = "none";
      break;
    default:
      document.title = "matman.xyz | Home";
      document.getElementById("contentHeading").innerHTML = "Home";
      break;
  }
  window.scroll({
    top: 0,
    left: 0,
    behavior: "smooth"
  });
  document.getElementById('contentHeading').addEventListener('click', function () {
    window.scroll({
      top: 0,
      left: 0,
      behavior: "auto"
    });
  }, false);
}

Posted 26-Sep-21 20:40pm

Matthew Rudman

Updated 27-Sep-21 3:19am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-09-27T03:19:00

Try something like this:

HTML

<a class="show" data-title="About" href="#contentAbout">❴about❵</a>
<a class="show" data-title="Portfolio" href="#contentPortfolio">❴portfolio❵</a>
<a class="show" data-title="Resume" href="#contentResume">❴resume❵</a>
<a class="show" data-title="Contact" href="#contentContact">❴contact❵</a>
<a class="show" data-title="Blog" href="#contentBlog">❴blog❵</a>

CSS

a.show {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
a.show:focus,
a.show.active {
    font-weight: bold;
    font-size: large;
}

JavaScript

const showContent = function(event){
    const clickedLink = event.target;
    if (!clickedLink || !clickedLink.classList.contains("show")) {
        return;
    }

    document.querySelectorAll("a.show.active").forEach(a => a.classList.remove("active"));
    clickedLink.classList.add("active");
    
    const targetContent = document.querySelector(clickedLink.getAttribute("href"));
    document.querySelectorAll(".content").forEach(el => el.style.display = "none");
    targetContent.style.display = "block";
    
    document.title = `matman.xyz | ${clickedLink.dataset.title}`;
    
    window.scroll({
        top: 0,
        left: 0,
        behavior: "smooth"
    });
    
    event.preventDefault();
};

document.querySelector("nav.nav").addEventListener("click", showContent);

Demo[^]