Question

我有一点问题，我设置了一个隐藏div的系统，显示点击。

总共有：

6帧：右下角的可编辑文本菜单（Notre Collection）
每种颜色7种颜色：可通过框架中的小方块颜色进行修改
2个不同的角度（当你点击一个小方块的颜色，改变视角时）
14张技术图纸图片（左下方格式）

我要加载100多张图片（！）。

甚至优化（每帧80kb，每张照片200kb，技术图纸60kb图像），在20mb ADSL连接上显示所有图像的延迟大约4-5秒因为我的系统（与IE完美配合） 6），加载所有隐藏div的全部内容...但是它应该只加载div：block（当你点击集合页面时只有两个div）和div：hidden在它们变成div时加载：block ...

视觉上发生的一部分： http://i.stack.imgur.com/XgDs7.png

以下是HTML的一小部分：

<div id="passionnee-couleurs">
<a onclick='collectionDiv("passionnee-beige-2");'><img src="../images/collection/ico/couleur-beige-vue.png"></a>
<a onclick='collectionDiv("passionnee-bleue");'><img src="../images/collection/ico/couleur-bleue.png"></a>
<a onclick='collectionDiv("passionnee-ecaille");'><img src="../images/collection/ico/couleur-ecaille.png"></a>
<a onclick='collectionDiv("passionnee-ecaille2");'><img src="../images/collection/ico/couleur-ecaille2.png"></a>
<a onclick='collectionDiv("passionnee-grise");'><img src="../images/collection/ico/couleur-grise.png"></a>
</div>

带有显示div的链接（共6个）：

<a onclick="collectionDiv('premiere-beige');cotationsDiv('premiere-cotations');">PREMIÈRE</a>
<a onclick="collectionDiv('passionnee-beige');cotationsDiv('passionnee-cotations');">PASSIONNÉE</a>

JS部分：

function collectionDiv(id)
         {
             document.getElementById('passionnee-beige').style.display = "none";
             document.getElementById('passionnee-beige-2').style.display = "none";
             document.getElementById('passionnee-bleue').style.display = "none";
             document.getElementById('passionnee-bleue-2').style.display = "none";
             document.getElementById('passionnee-ecaille').style.display = "none";
             document.getElementById('passionnee-ecaille-2').style.display = "none";
             document.getElementById('passionnee-ecaille2').style.display = "none";
             document.getElementById('passionnee-ecaille2-2').style.display = "none";
             document.getElementById('passionnee-grise').style.display = "none";
             document.getElementById(id).style.display = "block";
         }

CSS的一小部分：

    /* PASSIONNEE */
    #passionnee-beige {
        position:absolute;
        width:994px;
        height:532px;
        margin:auto;
        display:block;
        background-image:url(../images/collection/montures/passionnee-beige.jpg);
}
     
    #passionnee-beige-2 {
        position:absolute;
        width:994px;
        height:532px;
        margin:auto;
        display:none;
        background-image:url(../images/collection/montures/passionnee-beige-2.jpg);
}
     
    #passionnee-bleue {
        position:absolute;
        width:994px;
        height:532px;
        margin:auto;
        display:none;
        background-image:url(../images/collection/montures/passionnee-bleue.jpg);
}

如果你不理解所有事情，请不要犹豫。

感谢您的帮助！

大家晚上好！

编辑： http://jsfiddle.net/dktdesign/2B3Rw/12/

Answer 1

最终目标是一个文本（总共6个）链接同时更改2 div（框架+技术图纸）。这两个div有小按钮来加载这些相同div中的内容（扭曲？）。您可以在这里查看整个页面： http://dktdesign.com/les-ptites-pupilles/site/fr/collection.html

防止加载隐藏div的内容

1 个答案: