javaScript动态列表(li)及其内容切换

最新推荐文章于 2022-01-14 21:16:22 发布

LLM(-¥-)

最新推荐文章于 2022-01-14 21:16:22 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_51073424/article/details/116885976

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javaScript动态列表(li)及其内容切换实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态列表及其内容切换</title>
    <style>
        .tab{width: 500px;border: 1px solid orange;height: 200px;}
        .tab ul,.tab li{list-style: none;margin: 0px;padding: 0px;}
        .tab .tab-header ul li {float: left;width: 100px;text-align: center;background-color: #ccc;padding: 6px 0px;}
        .tab .tab-header ul li a {color: blue;text-decoration: none;display: block;}
        .tab .tab-header ul li.hot{background-color: white;border-top: 2px orange solid;padding-top: 4px;}

    </style>
    <script>
    window.onload = function(){
        //获取所有的li标签
        let lis=document.querySelectorAll(" .tab .tab-header ul li");
        //获取所有的div-body里面的div标签
        let divs=document.querySelectorAll(".tab .tab-body div");
        for(let i = 0; i<lis.length;i++){
            //给每个li标签设置单击事件
            lis[i].addEventListener('click',function(){
                for(let j=0;j<lis.length;j++){
                    lis[j].className='';
                    divs[j].style="display:none;";
                    this.className='hot';
                    divs[i].style="display:block;";
               }
                 
            });
        }
    }
    </script>
</head>

<body>
    <div class="tab">
        <div class="tab-header">
            <ul>
                <li class="hot"><a href="#">体育</a></il>
                <li><a href="#">财经</a></il>
                <li><a href="#">新闻</a></il>
                <li><a href="#">娱乐</a></il>
                <li><a  href="#">天气</a></il>
            </ul>
        </div>
        <div class="tab-body">
            <div style="display:block;"> 体育相关信息</div>
            <div style="display: none;">财经相关信息</div>
            <div style="display: none;">新闻播报</div>
            <div style="display: none;">娱乐节目</div>
            <div style="display: none;">天气预报</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

LLM(-¥-)

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
javaScript动态列表(li)及其内容切换

javaScript动态列表(li)及其内容切换实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
复制链接

扫一扫

专栏目录