jquery选项卡

最新推荐文章于 2021-09-10 09:08:12 发布

十友九

最新推荐文章于 2021-09-10 09:08:12 发布

阅读量50

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43778556/article/details/116791345

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jquery选项卡</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,ol,li{
                list-style: none;
            }
            .box{
                width: 600px;
                height: 400px;
                border: 10px solid pink;
                margin: 50px auto;
            }
            ul{
                width: 100%;
                height: 60px;
                overflow: hidden;
            }
            ul > li{
                width: 200px;
                height: 100%;
                text-align: center;
                line-height: 60px;
                font-size: 40px;
                color: #fff;
                background-color: skyblue;
                cursor: pointer;
                float: left;
            }
            ul > li.active{
                background-color: orange;
            }
            ol{
                width: 100%;
                height: 340px;
                position: relative;
            }
            ol > li{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: purple;
                font-size: 100px;
                line-height: 340px;
                color: #fff;
                display: none;
                text-align: center;
            }
            ol > li.active{
                display: block;
            }
        </style>
    </head>
    <body>
        
        <div class="box">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>
        <script src="../jquery/jquery.min.js"></script>
        <script>
               $('ul > li').on('click',function(){
                   console.log('11111111')
                   $(this).addClass('active').siblings().removeClass('active')
                   $('ol > li').removeClass('active').eq($(this).index()).addClass('active')
               })
        </script>
    </body>
</html>

十友九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选项卡

<!DOCTYPE html><html lang="en"> <head> <title>jquery选项卡</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .
复制链接

扫一扫