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 个答案: