【解決方法】別のリンクがクリックされるまで、クリックされたリンクをアクティブな状態に保つ

[ad_1]

別のリンクがクリックされるまで、リンクをアクティブな状態 (関連するスタイルが適用された状態) に保つ必要があります。この意味で、a:focus は、クリックしたときにリンクが動作するように動作しますが、本文や別の div などのページ上の他の場所を含む他の場所でリンクをクリックすると、そのリンクはフォーカスを失います (期待どおりですが、リンクをクリックしてフォーカスを維持し、別のリンクのみがクリックされたときにフォーカスを失い、別のリンク以外をクリックしたときにフォーカスを失うことはありません)。 a:active を試して a:hover の後に配置しましたが、うまくいきません。 CSS のみの実装を希望しますが、存在しない場合は、JavaScript の実装を受け入れます (プレーン、バニラ JS のみ、JQuery やその他のライブラリやフレームワークは使用しません)。現在、特定のリンクがクリックされたときに特定の div を表示するために JavaScript の onclick() 関数を使用しており、CSS をオーバーライドする場合に備えてこの投稿に含めています。

私が試したこと：

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);
}

解決策 1

次のようなことを試してください：

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