[英]toggling on/off on containing div and images
我試圖通過使用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;
}
siblings
不會工作,因為你的錨被包裹在div中。 嘗試:
var make_button_active = function() {
$(".container-thumbs a").removeClass("active");
$(this).addClass("active");
}
$(document).ready(function() {
$(".container-thumbs a").click(make_button_active);
});
演示。 (一個新的小提琴,因為你沒有發布你的)
試試這段代碼:
單擊時,它將從所有圖像中刪除活動類,然后將其應用於當前圖像。 另外我覺得你根本不需要make_button_active
函數。
$(document).ready(function() {
$(".container-thumbs a").click(function(){
$(".container-thumbs a").removeClass("active");
$(this).addClass("active");
});
});
如果您將代碼更改為此,它至少可以工作:
var make_button_active = function()
{
//Get item siblings
var siblings = $(".container-thumbs a");
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
$(this).addClass('active');
}
$(document).ready(function() {
$(".container-thumbs a").click(make_button_active);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.