Question

我想制作一个代码，在右边显示一个大盒子，在大盒子下面显示一些Multi小盒子颜色。当我点击小盒子上的大盒子改变它的颜色然后如果我点击下一个彩色小盒子，大盒子会改变特定的颜色。任何人都可以向我指明方向....谢谢

Answer 1

如果你正在使用jQuery，你可以这样做：

HTML：

<div id="bigBox"></div>
<div id="multiBoxes">
    <div class="colorPickBox" style="background-color:blue;"></div>
    <div class="colorPickBox" style="background-color:red;"></div>
    <div class="colorPickBox" style="background-color:yellow;"></div>
    <div class="colorPickBox" style="background-color:green;"></div>
    <div class="colorPickBox" style="background-color:brown;"></div>
    <div class="colorPickBox" style="background-color:violet;"></div>
    <div class="colorPickBox" style="background-color:magenta;"></div>
    <div class="colorPickBox" style="background-color:black;"></div>
    <div class="colorPickBox" style="background-color:gray;"></div>
    <div class="colorPickBox" style="background-color:white;"></div>
</div>

CSS：

#bigBox {
    width:100px;
    height:100px;
    background-color:blue;
}

.colorPickBox {
    display:inline-block;
    float:left;
    width:10px;
    height:10px;
}

JavaScript的：

$(".colorPickBox").click(function(){
    $("#bigBox").css("background-color",$(this).css("background-color"));
});

当然，使用CSS颜色名称（蓝色，红色，绿色......），你可以使用rgb() optinon：

background-color:rgb(0,0,255);

UPDATE：另外，如果你想避免使用jQuery，你可以轻松地做到这一点：

http://jsfiddle.net/PPDfR/

Answer 2

尽管js解决方案可能是我在现场使用的解决方案，但您可以选择纯css / html解决方案。您可以使用radio输入来存储状态，并巧妙地使用:checked，+和~选择器。它确实需要一些相当严格的html。像这样：

HTML：

<div class='options'>
    <input type='radio' name='color' id='color-red'/>
    <label for='color-red'></label>
    <input type='radio' name='color' id='color-green'/>
    <label for='color-green'></label>
    ...
    <div class='selected-color'></div>
</div>

<强>的CSS：

/* make the wrapper the reference for the .selected-color
   box and add some padding on top to position that box into */
.options {
    position: relative;
    padding-top: 100px;
}
/* turn the labels for the radio's into boxes */
.options label {
    display: inline-block;
    width:20px;
    height: 20px;   
    border: 2px solid transparent;
    margin: 3px;
}
/* give each box a color based on the id of 
   the input it belongs to */
#color-red + label { background: red; }
#color-green + label { background: green; }
...

/* give a border to the hovered / selected color */
input:checked + label, label:hover { border-color: cyan;}

/* hide the actual radio, we only need it to store the state */
input { display:none; }

/* position the .selected color and give it some dimensions */
.selected-color {
    width: 90px;
    height: 90px;
    border: 1px solid #ccc;
    position: absolute;
    top: 0;
    left: 0;
}
/* give the .selected-color based on the checked radio that precedes it */
#color-red:checked ~ .selected-color { background: red; }
#color-green:checked ~ .selected-color { background: green; }
...

一个例子： http://jsfiddle.net/337uS/

正如我所说，html相当严格。您必须在+选择器的每个标签前放置输入才能工作，并且“大框”＆＃39;必须在所有输入和需要成为~选择器的兄弟之后才能工作。随着选项数量的增加，css也会大幅增长，因此它几乎不是动态解决方案。但它是可行的，所以作为概念的证明......

想要用多色盒子改变盒子的颜色

2 个答案: