html导航栏

最新推荐文章于 2024-06-06 15:17:50 发布

半梦️半醒

最新推荐文章于 2024-06-06 15:17:50 发布

阅读量187

点赞数

分类专栏：前端项目文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_74476346/article/details/134214348

版权

前端项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML和JavaScript创建动态导航栏，包括基本结构、样式设计以及交互功能的实现，帮助读者掌握前端开发中导航栏的构建技巧。

摘要由CSDN通过智能技术生成

<!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>