Как добавить вертикальный точечный стиль навигации на моем сайте html / css

Question

Я создаю свой первый html css веб-сайт и хотел бы добавить точечный стиль навигации по вертикали на мою страницу, чтобы мои посетители знали, на какой странице они находятся.

Посмотрите на сайт, на который я ссылаюсь для разъяснения.

https://tympanus.net/Development/DotNavigationStyles/

Я предполагаю, что должен использовать js, но я не знаю, как на самом деле закодировать его на моем сайте.

Вот мой код для моего сайта.

HTML:

<div class="container">
        <nav class="navbar">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

<section id="home">
            <img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
        </section>

Пример моих разделов для указания макета и изменения страницы.

CSS:

    .container{
    widows:100%;
    height:100%;
    /* CSS Smooth Scroll */
    overflow-y:scroll;
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory;
}

.navbar{
    position:fixed;
    top:0;
    z-index:1;
    display:flex;
    width:100%;
    height:60px;
    background:rgba(0,0,0,0.7);
}

.navbar ul{
    display:flex;
    list-style:none;
    width:100%;
    justify-content:center;
}

.navbar ul li{
    margin:0 1rem;
    padding:1rem;
}

Какой JS код добавить и как связать его с HTML и CSS?

Если я нажимаю вторую точку, она заполняется, переходит на эту страницу и затем заполняется, но первая точка остается красным (активным), поэтому они не переходят.

В моем html для точки:

<script src="dot-nav.js"></script>

В моем js файле

// listen for clicks on the navbar
document.querySelector('.navbar').addEventListener('click', (e) => {

  // ignore it if the click isn't on an anchor element
    if (e.target.tagName.toLowerCase() === 'a') {

    // remove the 'active' class from all of the nav anchors
      document.querySelectorAll('.navbar a')
      .forEach(e => e.classList.remove('active'));

    // add the 'active' class to the clicked element
      e.target.classList.add('active');
  }
});

CSS для точки:

    /* position the navbar center right */

.navbar{
    position:fixed;
    right:32px;
    top:50%;
    transform: translateY(-50%);
}


/* style the individual nav items */
.navbar a {
    /* make them little circles */
    display: block;
    border-radius: 50%;
    border: 1px solid white;
    width: 20px;
    height: 20px;

    /* with some space between them */
    margin: 20px 0;

    /* hide the text content */
    text-indent: -999px;
    overflow: hidden;

    /* establish positioning conext for the ::after pseudo-elements (below)*/
    position: relative;
  }

  /* the "fill" */
.navbar a::after {
    /* won't render without a 'content' rule */
    content:""; 

    /* red fill */
    background-color: #ff0000;

    /* zero height until it's active */
    position: absolute;
    bottom: 0;
    height: 0;
    left: 0;
    right: 0;
    width: 100%;

    /* animate the height when it changes */
    transition: height 0.3s ease;
  }

  /* active and hovered elements */
.navbar a:hover::after,
.navbar a.active::after {
  /* change the height to 100%.
     the transition rule above will cause this to animate */
  height: 100%;
}

Answer 1

Вот базовая c реализация того, что я думаю , о котором вы просите.

javascript только для добавления / удаления active css учебный класс. Все действительно происходит в CSS. Я добавил комментарии в коде, чтобы объяснить, как он работает, но не стесняйтесь, если у вас есть вопросы.

// listen for clicks on the navbar
document.querySelector('.navbar').addEventListener('click', (e) => {

  // ignore it if the click isn't on an anchor element
	if (e.target.tagName.toLowerCase() === 'a') {
  
    // remove the 'active' class from all of the nav anchors
  	document.querySelectorAll('.navbar a')
      .forEach(e => e.classList.remove('active'));
      
    // add the 'active' class to the clicked element
  	e.target.classList.add('active');
  }
});

html, body {
  font-family: sans-serif;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* position the navbar center right */
.navbar {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

/* style the individual nav items */
.navbar a {
  /* make them little circles */
  display: block;
  border-radius: 50%;
  border: 1px solid white;
  width: 20px;
  height: 20px;
  
  /* with some space between them */
  margin: 20px 0;
  
  /* hide the text content */
  text-indent: -999px;
  overflow: hidden;
  
  /* establish positioning conext for the ::after pseudo-elements (below)*/
  position: relative;
}

/* the "fill" */
.navbar a::after {
  /* won't render without a 'content' rule */
  content: ''; 
  
  /* white fill */
  background-color: #fff;

  /* zero height until it's active */
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  right: 0;
  width: 100%;

  /* animate the height when it changes */
  transition: height 0.3s ease;
}

/* active and hovered elements */
.navbar a:hover::after,
.navbar a.active::after {
  /* change the height to 100%.
     the transition rule above will cause this to animate */
  height: 100%;
}

/* make the sections occupy the full screen height */
section {
  height: 100vh;
  background: tomato;
  color: bisque;  
  display: grid;
  place-items: center;
}

<div class="container">
  <nav class="navbar">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="home">home</section>
  <section id="about">about</section>
  <section id="services">service</section>
  <section id="contact">contact</section>
</div>