一个是菜单导航栏，另一个是内容显示区 (兄弟元素，不是父子关系)

HTML:

   //左侧导航菜单栏
         <ul id="box">
            <li  class="box-link">1</li>
             <li  class="box-link">2</li>
             <li  class="box-link">3</li>
         </ul>
//右侧内容栏
  //第一个连接显示
       <div id="rightTitle showhide">
              <h1 class="title">123</h1>
              <p class="title-content">123645664556645546</p>
       </div>
 //第二个连接显示
    <div id="rightTitle showhide">
          <h1 class="title">124</h1>
         <p class="title-content">123645664556645546</p>
    </div>
 //第三个连接显示
    <div id="rightTitle showhide">
         <h1 class="title">125</h1>
          <p class="title-content">123645664556645546</p>
     </div>

当我们点击左侧菜单栏的链接时，它会显示相应的内容显示区,首先我们要把，文本内容区添加一个class =‘showhide’，用于显示隐藏.让刚刚添加的类隐藏，当我们用鼠标点击时显示。

css

 body{display:flex:justify-content:center;align-items:center}
.box{width:18%;height:100px;}
.rightTitle{width:78%;height:100px;}

这些只是简单的样式，具体的每个导航栏多大，可以自己设置，当鼠标移上去背景发生改变，使用hover就可以了，

js

        //获取dom对象
       var box=document.getElementById(' box'),
             boxLink=document.querySelectorAll(".box-link");
       var rightTitle=document.querySelectorAll(".rightTitle"),
               index=0;
      //遍历boxLink元素，并且为每个元素添加点击事件
            for(var i=0;i<boxLink.length;i++){
       //将当前这个元素的索引值，赋值给当前元素的id
             boxLink[i].id=i;
            boxLink[i].onclick=function(){
            //当前对对象的id值，赋值给变量index
             index=this.id;
         //遍历右侧的所有元素，先将所有元素隐藏
              for(var k=0;k<rightTitle.length;k++){
                     rightTitle[k].style.display="none";
              }
              
             rightTitle[index].style.display="block";
        
         }
    }