Question

我有这个图像列表，因为我正在制作图库图像。每当我点击图像时，都会通过jquery添加活动类，但图像位置也会发生变化。如何让它们变粘？如果单击，请参阅下面的示例小提琴图像，其他图像会在下一次出现，或者会产生空白空间

$(".img").click(function() {
    $(this).addClass("highlight");
});

Answer 1

为突出显示的类添加框大小：

.highlight{
    border: 5px solid green;    
    box-sizing: border-box;
}

http://jsfiddle.net/of6hLc0t/1/

Answer 2

试试这个

#define API_BASE @"http://54.191.26.206/EntropikSDKBackend/index.php/checkout

使用toggleClass（）而不是addClass（）

Answer 3

你可以使用box-sizing。它将渲染项目内的边框。但是，图像会缩小，这会导致某种眨眼＆＃34;。

相反，您可以添加填充，突出显示时将删除该填充。如果您更喜欢，也可以尝试 margin 。

＆＃13;

$(".img").click(function() {
    // Changed to toggle to better show the example.
    $(this).toggleClass("highlight");
});

＆＃13;

#imageconview {
  background-color: black;
  height: 430px;
  width: 350px;
  margin-top: 10px;
  margin-left: 50px;
}

#imagecon img {
  /* Padding by default */
  padding: 5px;  
}

#imagecon img.highlight {
  border: 5px solid green;
    /* Remove padding when highlighted, since it's replaced by border. */
  padding: 0px;  
}

#imagecon img {
  display: inline-block;
  float: left;
  margin-left: 3px;
  margin-top: 2px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>



<div id="image_option">
	<div id="imagecon">

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>


<div img="percon">
<img class="img" src="C:\Users\edmtestuser\Desktop\Marlon Cristuta\images\photo_l_04.jpg" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">

<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">


	</div>

</div>
</div>

＆＃13;

Answer 4

Updated Fiddle http://jsfiddle.net/of6hLc0t/2/

#imagecon img.img.highlight{
border: 5px solid green;                   
}


#imagecon img {
display: inline-block;
float: left;
margin-left: 3px;
margin-top: 2px;
border:5px solid white;//Add this

}

Addclass使img元素在位置方面不粘

4 个答案: