突出顯示所選圖像

我想突出顯示一個帶有框的選定圖像，與「懸停」顯示的內容完全相同。有任何想法嗎？我嘗試了一些東西，但似乎沒有任何工作。懸停功能可以很好地工作，但點擊時，即使光標移開，我也需要一個框出現在保留的圖像周圍。下面粘貼了我的代碼。先謝謝你！！突出顯示所選圖像

<html><head> 

<style type="text/css"> 
.event { 
display: inline-block; 
float: left; 
} 

.swatch { 
width: 57px; 
height: 45px; 
display: inline-block; 
float: left; 
background-repeat: no-repeat; 
padding: 5px; 
background-position: center center; 
margin-top: 8px; 
} 

.swatch:hover { 
border: thin solid #999; 
background-position: center center; 
} 

.selected { 
border: thin solid #999; 
} 

.sq562-white { 
background-image: url(../images/products/women/lifeguard_girlstee_white.jpg); 
} 


.sq562-red { 
background-image: url(../images/products/women/lifeguard_girlstee_red.jpg); 
} 
</style> 

<script type="text/javascript"> 
$(window).load(function(){ 
$(document).ready(function() { 
// hide all the events 
$("#bigCal p").hide(); 

$(".event a").click(function(evt) { 
    evt.preventDefault(); 
    $("#bigCal p").hide(); 
    var id = $(this).attr('id'); 

    $("." + id).show(); 
}); 
}); 
});//]]> 

</script> 

</head> 
<body> 
<li class="event"> 
    <a id="red" href="#" > 
     <div class="swatch sq562-white"></div> 
    </a> 
</li> 

<li class="event"> 
    <a id="blue" href="#"> 
     <div class="swatch sq562-red"></div> 
    </a> 
</li> 
</ul> 


<div id="bigCal"> 
<p style="display: block; margin-top:25px; margin-bottom:-54px;" class="all blue"><a title="Red">Red</a></p> 
<p style="display: none; margin-top:25px; margin-bottom:-54px;" class="all red"><a title="White">White</a></p> 

</div> 


</body></html>

來源

2013-03-06 user2132851

這可以幫助：http://stackoverflow.com/questions/6491962/custom-checkbox/6492222＃6492222 – kapa 2013-03-06 23:39:02

你好，你還可以測試這個代碼：

$(document).ready(function() { 
// hide all the events 
$("#bigCal p").hide(); 

$(".event a").click(function(evt) { 
    evt.preventDefault(); 
    //remove the previous selected item 
    $(".swatch").removeClass("selected"); 
    //select the current item 
    $(".swatch", this).addClass("selected"); 
    $("#bigCal p").hide(); 
    var id = $(this).attr('id'); 
    $("." + id).show(); 
    }); 
});

而且一個樣本：http://jsfiddle.net/SNUhB/2/

來源

2013-03-06 23:51:04

謝謝！這完美的作品，只有我發現它與我的代碼中的其他javascripts/jQuery腳本（上面未列出）衝突。但那是我需要解決的一個單獨問題。再次感謝！ – user2132851 2013-03-07 00:00:56

使用onclick添加.selected類（使用jQuery，也可以用只有JavaScript來實現）：

$(".swatch").click(function() { 
    $(this).addClass("selected"); 
}

來源

2013-03-06 23:40:03

謝謝你的迴應！我很難得到它的工作。我將它添加到我的頭上：但沒有運氣。也許那不是我想要做的？對不起，新手在這裏！ – user2132851 2013-03-06 23:47:33

@ user2132851我剛纔編輯了我的答案;您必須將'$（this）'替換爲'this'，因爲您正在使用jQuery。 – 2013-03-06 23:50:53

如果你想切換類（添加類onclick然後刪除下一次點擊），你可以用'toggleClass'替換'addClass'。 – 2013-03-06 23:52:58

突出顯示所選圖像

回答

相關問題