Как обмениваться контентом в том же div?

Question

Я хотел бы загрузить различный текстовый контент в id div, используя навигационную точку ниже, и (ясно) я ничего не знаю о теге nav или о том, как его использовать. Я пытался выяснить это с помощью сценария js, но у меня был тот же не результат.

https://liveweave.com/cyOpZh

.id {
  position: absolute;
  margin-top: 320px;
  margin-left: 250px;
  width: 350px;
  height: 280px;
  background-color: burlywood;
}

.about {
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: azure;
  margin-top: 55px;
  width: 350px;
  height: 200px;
  padding: 0 20 20 20;
  text-align: justify;
  font-family: Montserrat, helvetica, arial, sans-serif;
  font-size: 10px;
}

.menu-nav {
  text-align: center;
  margin: 5px 0 0 0;
}

.menu-nav a {
  width: 10px;
  height: 10px;
  display: inline-block;
  border: solid 1px;
  overflow: hidden;
  text-indent: -9999px;
  border-radius: 50%;
}

.menu-nav a.active {
  background: #999;
  border: dashed 1px;
}

.quote {
  position: absolute;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: none;
  margin-top: 55px;
  width: 300px;
  height: 200px;
  text-align: right;
  font-family: Montserrat, helvetica, arial, sans-serif;
  font-size: 40px;
}

<div class="id">
  <div class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper arcu tortor. Suspendisse tempor elit at mauris ultricies, in viverra massa mattis. Nunc nec porta neque. Donec quis est vel ex ullamcorper accumsan. Mauris at risus elit.
    Sed sodales scelerisque dolor eget luctus. Nam feugiat dignissim velit, sed bibendum neque imperdiet quis. Nam a dolor nisl. Aenean ut dui vitae quam viverra lobortis imperdiet eu felis. In hac habitasse platea dictumst. Phasellus ut orci at erat
    vehicula cursus vel sed dui. Aenean nisl turpis, rutrum et est vel, rutrum varius magna. Vestibulum commodo eros eu turpis mattis, vitae dignissim tellus feugiat.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper
    arcu tortor. Suspendisse tempor elit at mauris ultricies, in viverra massa mattis. Nunc nec porta neque. Donec quis est vel ex ullamcorper accumsan. Mauris at risus elit. Sed sodales scelerisque dolor eget luctus. Nam feugiat dignissim velit, sed
    bibendum neque imperdiet quis. Nam a dolor nisl. Aenean ut dui vitae quam viverra lobortis imperdiet eu felis. In hac habitasse platea dictumst. Phasellus ut orci at erat vehicula cursus vel sed dui. Aenean nisl turpis, rutrum et est vel, rutrum varius
    magna. Vestibulum commodo eros eu turpis mattis, vitae dignissim tellus feugiat.</div>
  <nav class="menu-nav">
    <a href="#slide-0" class="active"></a>
    <a href="#slide-1"></a>
    <a href="#slide-2">Slide 2</a></nav>
</div>

Уже пытался настроить тег <nav> или меню сценария js, используя уже существующий шаблон.