如何在同一个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脚本菜单。