1

我试图这样做很长一段时间，但没有成功......见

CSS

    .images_list li {
    list-style: none;
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 10px;
}
.border {
    border: 6px solid #D8D8D8;
    background: url(upload/check.jpg);
}
.selected {
    border: 6px solid green;
}
.hidden {
    display:none;
}
span{
    position:absolute;
    padding-left:119px;
    margin-left:-150px;
    width:31px;
    height:150px;
}

HTML

<div class="images_list">
  <li class="border" title="content_1">
      <img src="http://imagensface.com.br/imagens/imagens-lindas-imagens-ace558.jpg" width="150" height="150" />
      <span>
          <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
      </span>
    </li>
  <li class="border" title="content_2">
      <img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
      <span>
          <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
      </span>
    </li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
  <div id="content_1" class="content hidden">content1</div>
        <div id="content_2" class="content hidden">content2</div>
      </div>

脚本

$('.images_list li').click(function() {
            $('.images_list .selected').removeClass('selected');
            $(this).toggleClass('selected');
            var clicked = $(this).attr('title');
            $("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
        });

我设法更改边框颜色，但我想将该检查图像放在所选图像的顶部。当没有选择任何内容时，该检查将被隐藏。有什么建议吗？

“工作”示例http://jsfiddle.net/6kSsd/2/

4

2 回答 2

1

第一个问题是您的跨度样式，您在这里定位所有跨度，您应该只定位图像列表中的那些跨度

改变

span {

到

.images_list li span {

并将跨度定位到顶角使用top:0px left:0px，并摆脱不需要的边距和填充样式，还要添加 display:none 以便它们最初不显示。

.images_list li span {
   display:none;
   position:absolute;
   top:0px;
   left:0px;
}

然后在选择其父项时显示复选标记

.images_list li.selected span {
    display:block;
}

小提琴演示

于 2013-10-05T18:21:10.487 回答
0

我设法更改边框颜色，但我想将该检查图像放在所选图像的顶部。当没有选择任何内容时，该检查将被隐藏。有什么建议吗？

您是否尝试过隐藏“检查图像”并仅在父元素选择了类时才显示它？下面的 CSS 可以解决问题：

.images_list li > span {
    display: none;
}
.images_list li.selected > span {
    display: inline-block;
}

请注意，<li>它只允许在<ul>而<ol> 不是在<div>. <br>用于强制中断文本 - 如果您需要在元素之间留出空间，CSS 属性margin是您的朋友。

于 2013-10-05T18:17:02.917 回答