问在主目录中的多个按钮\ div上切换多个图像
EN

Stack Overflow用户

提问于 2017-12-02 05:42:55

回答 0查看 63关注 0票数 0

我有这段代码可以在div中切换图像。我的问题是，当我尝试切换div-1中的图像时，一切正常，但当我开始切换div2中的图像时，div1中的图像消失了，相反的方向也消失了。请帮帮忙。我是jquery编程的新手。我正在建设的网站有很多。我正在建设的网站有更多的类别，我需要切换所有这些类别的图像。

<html>    
<body>
    <div id="Image-Holder-bg" class="inner ">
        <img class="animal1" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3a/100px-DJ.png/revision/latest?cb=20140813091425&path-prefix=pl" style="width:200px; height:200px;" />
        <img class="animal2" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/7/7e/100px-Owen.png/revision/latest?cb=20140813152315&path-prefix=pl" style="width:200px; height:200px;" />
        <img class="animal3" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/4/48/100px-Bridgette.png/revision/latest?cb=20140813090348&path-prefix=pl" style="width:200px; height:200px;" />
        <img class="animal4" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/d/df/100px-Staci.png/revision/latest?cb=20140813153602&path-prefix=pl" style="width:200px; height:200px;" />
    </div>

    <div id="Cat" target=".animal1" class="carouselanimal">animal1</div>
    <div id="Dog" target=".animal2" class="carouselanimal">animal2</div>
    <div id="Zebra" target=".animal3" class="carouselanimal">animal3</div>
    <div id="Peacock" target=".animal4" class="carouselanimal">animal4</div>

    <div id="Image-Holder-fg" class="inner ">
        <img class="popart1" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/38/100px-Leonard_ID.png/revision/latest?cb=20160304145758&path-prefix=pl" style="width:200px; height:200px;" />
        <img class="popart2" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/0/00/100px-Duncan.png/revision/latest?cb=20140813123905&path-prefix=pl" style="width:200px; height:200px;" />
        <img class="popart3" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/e/e1/100px-TDA_DIY_Char_Beth.png/revision/latest?cb=20140812140203&path-prefix=pl" style="width:200px; height:200px;" />
        <img class="popart4" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3e/100px-Izzy.png/revision/latest?cb=20140812135527&path-prefix=pl" style="width:200px; height:200px;" />
    </div>

    <div id="art1" target=".popart1" class="carouselpopart">popart1</div>
    <div id="art2" target=".popart2" class="carouselpopart">popart2</div>
    <div id="art3" target=".popart3" class="carouselpopart">popart3</div>
    <div id="art4" target=".popart4" class="carouselpopart">popart4</div>
</body>    
</html>

<style>
    .carouselanimal {
        display: inline-block;
        width: 50px;
        Height: 50px;
        background-color: black;
        color: white;
    }

    .carouselpopart {
        display: inline-block;
        width: 50px;
        Height: 50px;
        background-color: black;
        color: white;
    }

    #Image-Holder-bg {
        width: 200px;
        height: 200px;
        border: solid 2px red;
        overflow: hidden;
    }

    #Image-Holder-fg {
        width: 200px;
        height: 200px;
        border: solid 2px red;
        overflow: hidden;
    }
</style>

<script>
    $('.carouselanimal').click(function(a) {
        var $target = $($(this).attr("target"));
        $('img').hide();
        $target.show();
    });

    $('.carouselpopart').click(function(b) {
        var $target = $($(this).attr("target"));
        $('img').hide();
        $target.show();
    });
</script>

javascript

jquery

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47601893

复制

相似问题

问在主目录中的多个按钮\ div上切换多个图像
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在主目录中的多个按钮\ div上切换多个图像EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在主目录中的多个按钮\ div上切换多个图像
EN