Question

如果我只有一个li列表的图片，但是我要将图片分别在4个不同的div里显示，该怎么改呢？

另外背景色那里，因为我有需要选择3个背景色和1个字体颜色，所以我想在点击选择颜色值之前要先点击选择“背景色1”，“背景色2”，“背景色3”和“字体色”，然后再选择li里的颜色值。

<div id="front_show">
<div id="clipart1show"></div> //显示图片1
<div id="frontshowmessage">FRONT MESSAGE</div> //显示背景色和字体颜色
<div id="clipart2show"></div> //显示图片2 </div>
<div id="back_show">
<div id="clipart3show"></div> //显示图片3
<div id="backshowmessage">BACK MESSAGE</div> //显示背景色和字体颜色
<div id="clipart4show"></div> //显示图片4 </div>
<div id="inside_show">
<div id="insideshowmessage">INSIDE MESSAGE</div> //显示背景色和字体颜色 </div>

<div id="select_color"> //指定需要改变颜色的组
<ul class="color_selectGroups">
<li>Color 1</li> <li>Color 2</li> <li>Color 3</li> <li>Font Color</li> </ul> </div>

<div id="showcolor"> //点击上面的组后弹出这个div选择颜色值
<ul class="1bcolor_selectGroups" style="text-align:left">
<li style="background:#F5DE00">Yellow C</li>
<li style="background:#9D37B6">Purple C</li>
<li style="background:#42119C">Violet C</li>
</ul> </div>
不好意思，忘记说了，我是求JS代码实现这些效果的！

Answer 1

// 以下是你的HTML，不需要做任何修改
<div id="front_show">
<div id="clipart1show"></div> //显示图片1
<div id="frontshowmessage">FRONT MESSAGE</div> //显示背景色和字体颜色
<div id="clipart2show"></div> //显示图片2 </div>
<div id="back_show">
<div id="clipart3show"></div> //显示图片3
<div id="backshowmessage">BACK MESSAGE</div> //显示背景色和字体颜色
<div id="clipart4show"></div> //显示图片4 </div>
<div id="inside_show">
<div id="insideshowmessage">INSIDE MESSAGE</div> //显示背景色和字体颜色 </div>

<div id="select_color"> //指定需要改变颜色的组
<ul class="color_selectGroups">
<li>Color 1</li> <li>Color 2</li> <li>Color 3</li> <li>Font Color</li> </ul> </div>

<div id="showcolor"> //点击上面的组后弹出这个div选择颜色值
<ul class="1bcolor_selectGroups" style="text-align:left">
<li style="background:#F5DE00">Yellow C</li>
<li style="background:#9D37B6">Purple C</li>
<li style="background:#42119C">Violet C</li>
</ul> </div>

<div id="clipart1"> //选择背景图片显示在 id="clipart1show" //这是你上个求助贴的内容，我帮你贴这里了
<ul class="1clipart_selectGroups" style="text-align:left">
<li><a href="javascript:void(0)"><img src="images/clipart/Anchor.png" style="max-width:70px;max-height:70px;"></br>Anchor</a></li>
<li><a href="javascript:void(0)"><img src="images/clipart/Angel.png" style="max-width:70px;max-height:70px;"></br>Angel</a></li>
<li><a href="javascript:void(0)"><img src="images/clipart/Apple.png" style="max-width:70px;max-height:70px;"></br>Apple</a></li>
</ul> </div>
// 以上是你的HTML，不需要做任何修改

//在你的HTML后面加上以下代码即可,jquery可以用自己的替换掉
<script src="http://vod.xunlei.com/library/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("div#select_color,div#showcolor,div#clipart1").css({position:"absolute",top:150,left:450,border:"2px solid red",backgroundColor:"#aaa"}).hide(); //隐藏所有选择框
$("div[id^='clipart'][id$='show']").css({width:150,height:100,border:"1px solid #888"}).after("<a class='seletePicture' href='javascript:void(0);'>选择图片</a>"); //显示图片边框看的更清楚,然后加个按钮
$("div[id$='showmessage']").after("<a class='seleteBack' href='javascript:void(0);'>选择背景色</a> <a class='seleteFont' href='javascript:void(0);'>选择字体色</a>"); //加两个按钮
$("div#select_color li").css({cursor:"pointer"}).each(function(i,e){
$(e).css({"color":["red","yellow","blue"][i]}); //为字体色选择增加颜色样式，能更看清效果
});

$("a.seletePicture").bind("click",function(){ //弹出图片选择框
$("div#clipart1").prop({target:$(this).prev("div")}).toggle(); //用prop属性记住要返回给谁
});
$("ul.1clipart_selectGroups li").click(function(){ //返回并关闭对话框
$(this).closest("div").hide().prop("target").css("background-image","url("+$(this).find("img").attr("src")+")");
});

$("a.seleteBack").bind("click",function(){ //弹出背景选择框
$("div#showcolor").prop({target:$(this).prev("div")}).toggle();
});
$("ul.1bcolor_selectGroups li").click(function(){
$(this).closest("div").hide().prop("target").css("background",$(this).css("background"));
});

$("a.seleteFont").bind("click",function(){ //弹出字体色选择框
$("div#select_color").prop({target:$(this).prevAll("div[id$='showmessage']")}).toggle();
});
$("ul.color_selectGroups li").click(function(){
$(this).closest("div").hide().prop("target").css("color",$(this).css("color"));
});
});
</script>

Answer 2

那你把div放在li里面。div里面再放图片和其他标签
对应的css要修改
贴上你的css代码 和你已经写好的 帮你改成你想要的

追问

CSS代码太多了，能直接写JS给我吗?
上一个帖子有一段JS代码，但未能完全达到我想要的效果。。

Answer 3

还不如直接说想实现什么效果！
那样说不定会好点。。。