【练习】jQuery

时间：2017-12-26 14:39:54 阅读：249 评论：0 收藏：0 [点我收藏+]

标签：包装 src his none href addclass line 社区 div

作业要求：

参考下图，点击展示不同内容。

技术分享图片

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .header{
            background-color: whitesmoke;
            width: 100%;
            height: 50px;
            border-bottom: 2px solid red;
            position: relative;
        }


        .action {
            height: 50px;
            color: #696969;
            font-size: 22px;
            font-weight: 200;
            line-height: 50px;
            padding: 1px 30px 1px 30px;
        }
         .shopping_car a{
             text-decoration: none;
             height: 50px;
             color: white;
             font-size: 13px;
             font-weight: 200;
             padding: 0px 15px 0 15px;
             background-color:     #ee0f23;
             line-height: 50px;
             position: absolute;
             left:1500px;
             top:0px;
        }

         .img_cont img{
             margin-top: 52px;

         }


        .a1 {
            position: absolute;
            left:0;
            top:0;
        }

        .a2{
            position: absolute;
            left:150px;
            top:0;
        }

        .a3{
           position: absolute;
            left:300px;
            top:0;
        }

        .a4{
           position: absolute;
            left:450px;
            top:0;
        }

        .a5{
           position: absolute;
            left:680px;
            top:0;
        }



        .hide{
            display: none;
        }

        .change {
            background-color:     #ee0f23;
            color: #F5F5F5;
        }


    </style>
</head>
<body>
    <script src="jquery-3.2.1.min.js"></script>

    <div class="header">
        <div class="item">
            <div class="action a1">商品介绍</div>
            <div class="img_cont hide">
                    <img src="商品介绍.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a2">规格与包装</div>
            <div class="img_cont hide">
                    <img src="规格包装.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a3">售后保障</div>
            <div class="img_cont hide">
                    <img src="售后保障.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a4">商品评价(3.8万+)</div>
            <div class="img_cont hide">
                    <img src="商品评价.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a5">社区互动</div>
            <div class="img_cont hide">
                    <img src="社区互动.jpg" alt="">
            </div>
         </div>


        <span class="shopping_car">
            <a href="">加入购物车</a>
        </span>
    </div>

    <script>
        $(".action ").click(function () {
            $(this).addClass("change");
            $(this).next().removeClass("hide");
            $(this).parent().siblings().children(".action").removeClass("change");
            $(this).parent().siblings().children(".img_cont").addClass("hide");

     })

    </script>



</body>
</html>

案例

【练习】jQuery

标签：包装 src his none href addclass line 社区 div

原文地址：https://www.cnblogs.com/smallmars/p/8117183.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行