练习-选项卡效果

最新推荐文章于 2024-05-23 11:18:50 发布

奋斗中的切图猿

最新推荐文章于 2024-05-23 11:18:50 发布

阅读量108

点赞数

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

本文链接：https://blog.csdn.net/weixin_44573096/article/details/108945839

版权

jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button.active{
            color: white;
            background-color:red;
        }
    </style>
</head>
<body>
    <!-- 要求：用三个按钮和三个div方块编写一个选项卡，要求按钮在切换时变化背景颜色,同时div的内容也发生改变 -->
    <div>
        <div>
            <button class="active">1111</button>
            <button>2222</button>
            <button>3333</button>
        </div>
        <div>
            <p>1的内容</p>
            <!-- <p style="display: none;">2的内容</p>
            <p style="display: none;">3的内容</p> -->
        </div>
    </div>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        // 方法一：三个按钮三个p。this指的是$("button").click中的button
        // $("button").click(function (){
        //     $("button").removeClass("active").eq($(this).index()).addClass("active");
               //在某个按钮点击的时候，让所有按钮的事件都取消，然后再给点击的这个按钮添加class事件
        //     // $(this).addClass("active");
        //     $("p").css("display","none").eq($(this).index()).css("display","block");
               // 在某个按钮点击的时候，按钮所触发的事件改变的同时，p的事件也发生改变（按钮所对应的p显示相对应的内容）
        // })
        // 方法二：三个按钮一个p
        var arr = ["1的内容","2的内容","3的内容"];
         $("button").click(function (){
            $("button").removeClass("active").eq($(this).index()).addClass("active");
            $("p").html(arr[$(this).index()]);
         });
    </script>
</body>
</html>

奋斗中的切图猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习-选项卡效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button.active{
复制链接

扫一扫