Question

我在当前的佳得乐网站上看到他们有四个版本的同一产品，唯一的区别是口味。在外观和感觉上你可以看到四种产品，其中一种是对其他产品的突出问候。

IOW，你有四种产品，三种尺寸较小，第四种比其他产品大。当用户点击这三个小产品中的一个时，自动点击的产品被替换为主产品，并且他们在它们之间交换位置和大小。

您可以查看我想要的here。

实现这一目标非常复杂吗？我只知道HTML，CSS和一些Jquery。

修改
我认为这个功能的代码如下：

<ul class="products">
    <li><a href="#" class="red">red</a></li>
    <li><a href="#" class="blue">blue</a></li>
    <li><a href="#" class="green">green</a></li>
</ul>

<ul class="featured">
    <li><a href="#" class="yellow">yellow</a></li>
</ul>

如果用户点击with class =＆＃34; products＆＃34;的三个产品中的一个，则应将其与内部产品交换为with class =＆＃34; featured＆＃34;。我们假设，用户点击蓝色产品，那么HTML就是下一个：

<ul class="products">
    <li><a href="#" class="red">red</a></li>
    <li><a href="#" class="yellow">yellow</a></li>
    <li><a href="#" class="green">green</a></li>
</ul>

<ul class="featured">
    <li><a href="#" class="blue">blue</a></li>
</ul>

此外，如果可以添加淡入淡出动画，那就太棒了这是我在JSFiddle的第一次尝试，但我还没有完成任何JS脚本。

Answer 1

最后，我明白了。我肯定必须是一个更好的解决方案，但我的是：

<强> HTML

<p>Choose one of the products</p>
<ul class="products">
    <li><a href="#" class="red">red</a></li>
    <li><a href="#" class="blue">blue</a></li>
    <li><a href="#" class="green">green</a>
    </li>
</ul>
<div style="clear:both"></div>
<!--/ here would display the picked product as highlighted and would swap with the current one. -->
<ul class="featured">
    <li><a href="#" class="yellow">yellow</a>
    </li>
</ul>

<强> CSS

ul {
    list-style: none;
    list-style-position: inside;
}
ul.products li {
    float:left;
    margin:0 2px 0;
}
ul.products li a {
    width:40px;
    height:40px;
}

a.red, a.blue, a.green, a.yellow {
    background:red;
    display:block;
    text-indent:-9999px;
    border:1px solid black;
}
a.blue {
    background:blue;
}
a.green {
    background:green;
}
a.yellow {
    background:yellow;
}

ul.featured > li > a {
    width:135px !important;
    height:135px !important;
    cursor: default;
}

<强>的jQuery

 $("ul.products li").click(function () {
     var strDiv1Cont = $(this).html();
     var strDiv2Cont = $("ul.featured li").html();
     $(this).html(strDiv2Cont);
     $("ul.featured li").hide().html(strDiv1Cont).fadeIn(1500);
 });

JSFiddle

通过单击交换div的内容和位置

1 个答案: