Question

我有3个div，默认情况下只有一个可见，它们每个都包含有关产品的信息。在这个div下面是3个图像的列表，这些图像是产品的图像。默认情况下，当然会选择第一个列表项并具有class="selected"。当点击不同的产品图片时，class="selected"移动到该列表项，其上方的div变为隐藏，并且需要显示包含其他产品信息的div。

我已经到处搜索了一个可以做我想要的插件，它们在某些方面都受到限制，这使我无法做到这一点。

Answer 1

请考虑以下代码：

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" />
<img id="img2" src="2.jpg" desc="d2" class="prodImg" />
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/>

<div id="d1">description 1</div>
<div id="d2" class="hidden">description 2</div>
<div id="d3" class="hidden">description 3</div>

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;

        $("#" + $(".selected").attr("desc")).addClass("hidden");
        $(".selected").removeClass("selected");

        $("#" + $(this).attr("desc")).removeClass("hidden");
        $(this).addClass("selected");

    });

</script>

这应该让你非常接近。你需要定义你的图像和div之间的关系...所以我在图像中添加了一个'desc'属性。图像上的额外“prodImg”类允许您确保仅为这种类型的交换进出行为连接这些图像。

Answer 2

Accordion小部件具有一些类似的功能。如果将图像放在标题中，您将获得所需的效果。

请查看http://docs.jquery.com/UI/Accordion以获取更多信息。

Answer 3

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;


        $('.prodImg').removeClass('selected');

        $(this).addClass('selected');

        var name = $(this).attr('desc');

        $('.'+name).removeClass();
        $('.'+name).addClass('');       

    });

</script>

我希望这可以帮到你！

jQuery元素交换

3 个答案: