在图库中设置活动缩略图的样式

Question

这是一个示例库：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head> 
<body> 
<div id="large"></div>  
<div id="thumbs"> 
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div> 
</body>
</html>

我不知道如何突出显示活动的缩略图，以便其背景保持蓝色直到我单击另一缩略图为止。

提前致谢！

麦克风

Answer 1

这是工作的小提琴：

http://jsfiddle.net/DEn6r/2/

jQuery代码添加：

$('img').click(function() {
          $('img').not(this).removeClass('active');
          $(this).addClass('active');
});

要添加的CSS：

img.active{background:#00f;}

Answer 2

这是一个纯JavaScript的简单解决方案，可以与您已经在做的事情保持一致：

http://jsfiddle.net/drNqx/3/

在文档的<head>中添加以下简单功能：

<script type="text/javascript">
function reset()
{
    var imgs = document.getElementsByTagName('img');
    for(var i = 0; i < imgs.length; i++)
    {
        imgs[i].style.backgroundColor = '#fff';
    }
}
</script>

将其放置在每个缩略图的onclick您已经拥有的位置的前面：

reset();this.style.backgroundColor='#00f';

要将第一个缩略图突出显示为默认缩略图，请将其添加到reset()函数下面：

function init()
{
    document.getElementById('img1').style.backgroundColor='#00F';
}

window.onload = init;

Answer 3

/ *您需要使用Jquery将类添加到活动的缩略图中。 确保添加jQuery路径* /

$(document).ready(function(e){

$("#thumbs img").click(function(){

$("#thumbs img").removeClass("selected");/* this will remove selected class from all images*/
$(this).addClass("selected"); /* this will add 'selected' class to particular image where you clicked */

});
});

in css you can give whatever style you want to give using css

<style>
#thumbs img.selected
{
border:2px solid blue;
background-color:#eee;
}
#thumbs img
{
padding:5px;
}

</style>

在图库中设置活动缩略图的样式

问题描述

3 个解决方案

解决方案1
2 2012-06-27 18:13:02

解决方案2
2 已采纳 2012-06-27 18:56:05

解决方案3
0 2012-06-27 18:20:17

在图库中设置活动缩略图的样式

问题描述

3 个解决方案

解决方案1 2 2012-06-27 18:13:02

解决方案2 2 已采纳 2012-06-27 18:56:05

解决方案3 0 2012-06-27 18:20:17

解决方案1
2 2012-06-27 18:13:02

解决方案2
2 已采纳 2012-06-27 18:56:05

解决方案3
0 2012-06-27 18:20:17