tab栏复用第二种写法

我若成魔，佛赖我何，我就是程序狂魔

已于 2022-06-29 16:53:26 修改

阅读量97

点赞数 4

文章标签：大数据

于 2022-06-29 16:53:16 首次发布

本文链接：https://blog.csdn.net/wangmengsasa/article/details/125525146

版权

这篇博客介绍了如何使用HTML、CSS和JavaScript实现一个导航栏与内容区域联动的效果。通过添加事件监听，当点击导航栏中的链接时，相应的内容区块会显示，其他内容则隐藏。代码示例详细展示了HTML结构、CSS样式和JavaScript逻辑，适用于前端网页交互设计。

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

HTML代码

 <div class="tbl">
        <div class="nav">
            <a href="javascript:;" class="hover">首页</a>
            <a href="javascript:;">公司简介</a>
            <a href="javascript:;">公司新闻</a>
            <a href="javascript:;">公司登录</a>
       </div>
        <div class="content">
             <div>1</div>
             <div>2</div>
             <div>3</div>
             <div>4</div>
        </div>
        </div>

        <div class="tbl">
            <div class="nav">
                <a href="javascript:;" class="hover">首页</a>
                <a href="javascript:;">公司简介</a>
                <a href="javascript:;">公司新闻</a>
                <a href="javascript:;">公司登录</a>
           </div>
            <div class="content">
                 <div>1</div>
                 <div>2</div>
                 <div>3</div>
                 <div>4</div>
            </div>
            </div>

            <div class="tbl">
                <div class="nav">
                    <a href="javascript:;" class="hover">首页</a>
                    <a href="javascript:;">公司简介</a>
                    <a href="javascript:;">公司新闻</a>
                    <a href="javascript:;">公司登录</a>
               </div>
                <div class="content">
                     <div>1</div>
                     <div>2</div>
                     <div>3</div>
                     <div>4</div>
                </div>
                </div>

CSS代码

 *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .tbl{
            width: 1320px;
            margin: 40px auto;
        }
        .tbl>.nav{
            width: 1320px;
            height: 40px;
            border: 1px solid gray;
        }
        .tbl>.nav>a{
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: grey;
            float: left;
            margin-left: 160px;
        }
      
        .tbl>.nav>.hover{
            background: pink;
            color: white;
        }
        .tbl>.content{
            width: 1320px;
            height: 300px;
            overflow: hidden;
           
        }
        .tbl>.content>div{
            width: 1320px;
            height: 300px;
            border: 1px solid gray;
            text-align: center;
            line-height: 300px;
            font-size: 16px;
            box-sizing: border-box;
        }

JS代码

  <script>
      //页面所有信息加载完执行程序
       window.addEventListener("load",function(){

          function tablan(){//封装函数
            //事件的委派  这里我们不需要给每个a标签加事件  只需要给.nav标签加事件 通过.nav去找里面的子元素标签 ->事件的委派
            let navNode=document.querySelectorAll('.nav');
            	// 我们需要给每个.nav标签加监听事件 需要用for循环
            for(let i=0;i<navNode.length;i++){
                  navNode[i].addEventListener('click',function(e){
                //  console.log(e.target)//获得的是当前的 .nav
                // 我们需要获取到所有的a标签 可以通过当前的a标签获取父级标签.nav 再通过父级标签 找到里面所有的子标签a标签
               // console.log(e.target.parentNode)//获得父级标签
                //console.log(e.target.parentNode.children)//通过父级获得所有a标签
                let as=e.target.parentNode.children;
                //循环所有li
                for(let j=0;j<as.length;j++){
                    //把的class属性样式都清除
                    as[j].className='';
                    //给每个li添加index 属性
                    as[j].setAttribute('index',j)
                }
                //通过当前的a标签获得父级.nav标签 通过.nav标签 获得下一个兄弟级标签 .content 再通过.content标签 获得里面的子标签 div标签
                // console.log(e.target.parentNode.nextElementSibling.children)
                let content_div=e.target.parentNode.nextElementSibling.children;
                //循环.content里面所有子元素
                 for(let k=0;k<content_div.length;k++){
                    //把.content里面所有子元素隐藏
                    content_div[k].style.display="none";
                 }
                 //获取对应的索引号
                 let thisIndex = e.target.getAttribute('index');
                 //这时的事件指向是类名为hover
                    e.target.className='hover';
                    //这时的相对应地div元素显示
                    content_div[thisIndex].style.display="block";
               })
            }
          
        }  
           tablan()//调用函数
     })
    </script>

效果图