JavaScript笔记——选项卡

最新推荐文章于 2024-05-15 09:50:20 发布

pzh1109

最新推荐文章于 2024-05-15 09:50:20 发布

阅读量60

点赞数

分类专栏：学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_48619092/article/details/120922529

版权

学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding:0px;
                list-style:none;
            }
            ul{
                overflow: hidden;
            }
            ul>li{

                float: left;
                margin-right: 10px;
                cursor: pointer;
                padding:10px
            }
            ul .current{
                background: red;
                color:white;
            }
            section div{
                display: none;
            }
            section .current{
                /* 显示标签的时候，看标签的性质 */
                display: block;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="current">首页</li>
            <li>个护</li>
            <li>预告</li>
        </ul>
        <section>
            <div class="current">首页</div>
            <div>个护</div>
            <div>预告</div>
        </section>

        <script>
            var lis=document.getElementsByTagName('li');
            var boxs=document.getElementsByTagName('div');
            for(var i=0;i<lis.length;i++){
                // 自定义标签属性
                lis[i].setAttribute('zsh',i);

                lis[i].onclick=function(){
                    for(var j=0;j<lis.length;j++){
                        lis[j].setAttribute('class','');
                        boxs[j].setAttribute('class','');
                    }
                    this.setAttribute('class','current')

                    // 获取自定义属性
                    var index=this.getAttribute('zsh');
                    boxs[index].setAttribute('class','current')
                    
                }
            }
        </script>
    </body>
</html>

pzh1109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript笔记——选项卡

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
复制链接

扫一扫