0

I want the clicked navigation-anchors to be with the different CSS (color) that i defined, but somehow it only works on the anchors 'D.1-D.4' and the second 'C' anchor. So it has to do with the href="javascript:void(0)". But I also need the href to switch the view to the section clicked (like href="#a"). What is going on here and how can I get both?

Here is my code with a navigation on the left and the main-content on the right side of the screen:

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <nav class="sidebar" id="mySidebar">

    <div class="sidebar-navarea">
      <div class="sidebar-links1">

        <a class="sidebar-btn-hover sidebar-btn" href="#a">A</a>
        <a class="sidebar-btn-hover sidebar-btn" href="#b">B</a>
        <a class="sidebar-btn-hover sidebar-btn" href="#c">C</a>
        <a href="javascript:void(0)" class="sidebar-btn-hover sidebar-btn">C</a>
        <a onclick="myAccFunc()" href="javascript:void(0)" class="sidebar-btn-hover sidebar-btn" id="myBtn">D</a>

        <div id="demoAcc" class="sidebar-links2">
          <a class="sidebar-btn-hover sidebar-btn" href="#d1">D.1</a>
          <a class="sidebar-btn-hover sidebar-btn" href="#d2">D.2</a>
          <a class="sidebar-btn-hover sidebar-btn" href="#d3">D.3</a>
          <a class="sidebar-btn-hover sidebar-btn" href="#d4">D.4</a>
        </div>

        <a class="sidebar-btn-hover sidebar-btn" href="#e">E</a>
        <a class="sidebar-btn-hover sidebar-btn" href="#f">F</a>
      </div>
    </div>
  </nav>



  <!-- !PAGE CONTENT! -->
  <div class="content-main">

      <header>
        <p class="content-header" id="a"> > A</p>
      </header>

      <div class="content-text">
        <p>TEXT A TEXT A TEXT A TEXT A TEXT A TEXT A </p>
      </div>

      <header>
        <p class="content-header" id="b"> > B</p>
      </header>

      <div class="content-text">
        <p>
          Text B Text B Text B Text B 
        </p>
      </div>

      <header>
        <p class="content-header" id="c"> > C</p>
      </header>

      <div class="content-text">
        <p>Text C Text C Text C Text C </p>
      </div>

      <header>
        <p class="content-header" id="d"> > D</p>
      </header>

      <div class="content-text">
        <p id="d1">D.1 </p>
        <p id="d2">D.2</p>
        <p id="d3">D.3</p>
        <p id="d4">D.4</p>
      </div>

      <header>
        <p class="content-header" id="e"> > E</p>
      </header>

      <div class="content-text">
        <p class="content-header" id="f"> > F</p>
      </div>
    </div>

<script>
    function myAccFunc() {
      var x = document.getElementById("demoAcc");
      if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
      } else {
        x.className = x.className.replace(" w3-show", "");
      }
    }
  </script>
</body>

</html>

CSS Code:

    .sidebar-btn:focus {
  color: #000 !important;
  background-color: #ccc !important
}

a:focus .sidebar-btn {
  color: #000 !important;
  background-color: #ccc !important
}

The :hover command works fine for all:

    .sidebar-btn-hover:hover {
  color: #000 !important;
  background-color: #ccc !important
}
Fred
  • 1
  • 1

0 Answers0