<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>导航栏</title>
</head>
<style>
body{
background-color: rgb(255, 0, 174);
}
ul{
margin: 0px;
padding: 0px;
list-style-type: none;
border: 1px solid black;
width: 200px;
background: #350d0d;
}
li a{
text-decoration: none;
display: block;
color: #e20c0c;
}
.navcontainer{
background-color: #d1659f;
width: 660px;
height: 50px;
margin: 0 auto;
display: flex;
align-items: center;
border-radius: 5px;
}
.navbox{
list-style: none;
width: 700px;
height: 30px;
border-radius: 4px;
}
.navbox li{
float: left;
margin-left: 5px;
line-height: 30px;
cursor: pointer;
width: 80px;
height: 30px;
text-align: center;
text-decoration: none;
}
.navbox li:hover{
background-color:#fff2e5;
border-radius: 20px;
text-decoration: none;
color: #ff8c14;
}
.active{
color: #ff8c14;
}
#moren{
color: #ff8c14;
}
img{
width: 20px;
height: 20px;
margin-top: 7px;
margin-left: 20px;
cursor: pointer;
}
</style>
</style>
<body>
<div class="navcontainer">
<nav class="navbox">
<li class="nav-items"><a href="index.html" target="_blank">首页</a></li>
<li class="nav-items"><a href="index6.html" target="_blank">简历</a></li>
<li class="nav-items"><a href="index1.html" target="_blank">音乐</li>
<li class="nav-items"><a href="index2.html">相册</a></li>
<li class="nav-items"><a href="index3.html">动态</a></li>
<li class="nav-items"><a href="index5.html">情感</a></li>
<li class="nav-items">更多</li>
<img src="img/demo.jpg" title="更多">
</nav>
</div>
<script>
//获取导航栏元素列表
var navItems = document.getElementsByClassName("nav-items");
//为每一个元素添加监听事件
for(var i =0;i<navItems.length;i++){
//移除所有元素的类名
navItems[i].addEventListener("click",function(){
for(var j=0;j<navItems.length;j++){
navItems[j].classList.remove('active');
navItems[j].removeAttribute("id");
}
//给当前点击的导航栏元素添加颜色
this.classList.add('active');
});
}
</script>
<script>
var lis=document.querySelector('ul').querySelectorAll('li');
var divs=document.querySelector('.neirong').querySelectorAll('div');
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i);
lis[i].onclick=function(){
for(var i=0;i<lis.length;i++){
lis[i].className='';
}
this.className='choose';
var index=this.getAttribute('index');
for(var i=0;i<divs.length;i++){
divs[i].style.display='none';
}
divs[index].style.display='block';
}
}
</script>
</body>
</html>
html导航栏
最新推荐文章于 2024-06-06 15:17:50 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)