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";
}
}