Sie können schöne Kontrollkästchen ganz einfach anpassen, ohne zu viel Code zu verwenden, und die Seitenproduktion hyperlinks_HTML/Xhtml_Web verwenden

Heute dachte ich plötzlich, dass das Kontrollkästchen in HTML nur begrenzte Stile hat, die geändert werden können, und dass das Erstellen eines Kontrollkästchens jetzt das Schreiben einer Menge Code erfordert, und dann habe ich über eine einfache Implementierung nachgedacht. Völlig bewiesen, dass dies möglich ist. Es gibt nicht viel zu sagen, posten Sie einfach den Quellcode als Referenz.

Effekt:

Wenn nicht ausgewählt: Wenn ausgewählt:

Bildhintergrund:

checkboxSel.jpg

checkboxNoSel.jpg

Code:

HTML-Code-Snippet:

Code kopieren

Der Code lautet wie folgt:

< ;/ a> Montag

JavaScript-Code-Snippet:

Code kopieren

Der Code ist wie folgt:

$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$(this).removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');
}); 🎜>
CSS-Code-Snippet:

Code kopieren

Der Code lautet wie folgt:

.divCheckBoxNoSel{

background: url("../image/checkboxNoSel.jpg") no-repeat center center;

width:15px; ;
border:1px solid #BDBDBD;
color:#FFF;
.divCheckBoxSel{
background: url("../image/checkboxSel.jpg") no-repeat Mitte Mitte;
float: left;
height:15px;
color:#FFF; 🎜>
Unterscheiden Sie die einzelnen Hyperlinks nicht auf viele Arten. Tatsächlich können auch ähnliche Optionsschaltflächen auf diese Weise einfach implementiert werden, wodurch Zeit gespart wird.