jq写出点击对应标题切换对应图片的内容

我们在逛淘宝的时候我们点击对应标题会切换对应内容或者图片我们用jq来去做一下

首先我们先创建好一个框架把框架放到对应的位置

<div class="zt">

        <div class="xzk">

            <div class="gj">国际大牌</div>//对应的标题1和图片1可以做相应的切换效果

            <div class="gj">国妆名牌</div>

            <div class="gj">清洁用品</div>

            <div class="gj">男士用品</div>//对应的标题4和图片4可以做相应的切换效果

        </div>

        <div class="tp">

            <img src="img/5.webp" alt="">//给我们的图片开始放一张图片

        </div>

    </div>

然后给我们的图片多加几个对应的图片来完成效果我们需要多少标签即可在后面加入对应的图片这样就可以方便我们以后可以多加几个标签可以简单的去操作，不用有繁琐的去修改代码了

var img=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']

然后我们就去做点击对应的标题就可以切换对应的内容或图片

$('.gj').mousemove(function(){

            $(".gj").removeClass("bj")

            $(this).addClass('bj')

            $(this).parent().next().children().attr("src",img[$(this).index()])

        })

这样我们的点击切换对应图片的内容就做好了，如果要切换内容也可以按照这样的方法去解决。