0

サンプル ギャラリーは次のとおりです。

<!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>

アクティブなサムネイルを強調表示して、別のサムネイルをクリックするまで背景が青のままになるようにするにはどうすればよいでしょうか。

前もって感謝します！

マイク

4

3 に答える 3

2

これが実用的なフィドルです：

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

追加するJqueryコード：

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

追加するCSS： 

img.active{background:#00f;}
于 2012-06-27T18:13:02.787 に答える
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;
于 2012-06-27T18:56:05.827 に答える
0

/* 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>
于 2012-06-27T18:20:17.007 に答える