我正在尝试通过使用 css、javascript 添加/删除活动类来突出显示当前图像。
我将我的解决方案上传到了 jsfiddle,请看一下。真的很想了解这有什么问题。 http://jsfiddle.net/BEmXZ/39/
HTML
<div class="container-thumbs">
<div><a><img src=".jpg" /></a></div>
<div><a class="active"><img src=".jpg" /></a></div>
<div><a><img src=".jpg" /></a></div>
</div>
Javascript
var make_button_active = function() {
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index) {
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
$(document).ready(function() {
$(".container-thumbs a").click(make_button_active);
});
CSS
.container-thumbs{
width: 300px; height: 25; font-size: 18px;
}
.container-thumbs a{
list-style: none; float: left; margin-right: 4px; padding: 5px;
}
.container-thumbs div a:hover, .container-thumbs div a.active {
background-color: #f90;
}