js自定义标题切换

最新推荐文章于 2023-05-09 14:45:25 发布

_dannyWang_

最新推荐文章于 2023-05-09 14:45:25 发布

阅读量196

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/danny342354/article/details/125874879

版权

在这里插入图片描述

 var imgs = [
        {
            url: "../../img/open_platform/icon_zhifu1_20220427@2x.png",
            urlAcitve: "../../img/open_platform/icon_zhifu2_20220427@2x.png",
            name: "支付",
        },
        {
            url: "../../img/open_platform/icon_huiyuan1_20220427@2x.png",
            urlAcitve: "../../img/open_platform/icon_huiyuan2_20220427@2x.png",
            name: "会员",
        },
        {
            url: "../../img/open_platform/icon_anquan1_20220427@2x.png",
            urlAcitve: "../../img/open_platform/icon_anquan2_20220427@2x.png",
            name: "安全",
        },
        {
            url: "../../img/open_platform/icon_jichu1_20220427@2x.png",
            urlAcitve: "../../img/open_platform/icon_jichu2_20220427@2x.png",
            name: "基础",
        },
        {
            url: "../../img/open_platform/icon_yingxiao1_20220427@2x.png",
            urlAcitve: "../../img/open_platform/icon_yingxiao2_20220427@2x.png",
            name: "营销",
        },
    ]
for (var i = 0; i < imgs.length; i++) {
        
        if(i == 0){
            var imgArr = '';
            imgArr += '<p class="change">';
            imgArr += '<img class="imgs1" src="' + imgs[0].urlAcitve + '" alt="" >';
            imgArr += '<span class="addclass">' + imgs[0].name + '</span>';
            imgArr += '<span class="underline"></span>';
            imgArr += '</p>';
        }else{
            var imgArr = '';
            imgArr += '<p class="change">';
            imgArr += '<img class="imgs1" src="' + imgs[i].url + '" alt="" >';
            imgArr += '<span>' + imgs[i].name + '</span>';
            imgArr += '<span class="underline underline_show"></span>';
            imgArr += '</p>';
        }
        $('.change-con').append(imgArr);
    }
    $(".change").each(function (index) {
        $(this).click(function () {
            for (var i = 0; i < imgs.length; i++) {
                if(index != i){
                    $(".change img").eq(i).attr("src",imgs[i].url); 
                    $(".change span").removeClass("addclass");
                    $(this ).find('span').addClass("addclass");
                    $(this).find("img").attr("src", imgs[index].urlAcitve); 
                    $(".change .underline").eq(0).addClass("underline_show"); 

                }
            }  
        });
    });