如何使用选项更改信息

Question

我正试图弄清楚如何做到这一点。我在一家销售仓储建筑的公司工作，我正在尝试向我们的网站添加一些新组件，其中一个是交互式的。我想要的是能够在按下按钮或选择选项（选项标签）时切换图片或文本（最好是两者）。如果有人可以提供帮助，那就太好了。

这个页面是我一直在尝试的（几个小时），它对我没有用。

http://progrower.coffeecup.com/shop/viewitem.php?productid=45

我知道相当多的 html 和少量的 javascript，所以尽可能简单地说。

Answer 1

HTML

<select id="colour">
    <option>red</option>
    <option>purple</option>
    <option>blue</option>
    <option>yellow</option>
</select>

CSS

div {
    background: red;
    height: 150px;
    width: 150px;
}

jQuery

$(document).ready(function() {
    $('select:#colour').change(function() {
       var colour = $(this).val();
        $('div').css({'background': colour});
    });
});

您可能希望使用编辑代码来更改产品图片。

这是一个演示：JSFiddle!