|
|
Postitatud 16.05.2019 11:10:41
|
|
|
|
See puhas CSS3 meetod raadionuppude kaunistamiseks töötab hästi järgmistes olukordades:
1. See võib olla ühilduv IE9 ja uuema versiooniga ning kui see peab olema ühilduv IE8-ga, kirjuta IEs hack, et stiil eemaldada
2. Toetatud on ainult raadionupu raadio, sest raadio nupu valiku stiili ringi saab teha CSS-iga, kuid linnukese linnukese jaoks on vaja pildi- või ikoonifondi teeki
3. JS-i ei ole vaja lülitusefektide toetamiseks
Allolev pilt on lõplik renderdus:
HTML-kood:
CSS kood:
Selle meetodi kõige olulisem on valida efekti klassinimi: .radio input:checked + span.radio-on
+ on CSS2 pseudoklass, mis tähendab, et div+p valib <div> kõik elemendid kohe pärast <p> elementi .
See tähendab, et leia valitud sisend (:checked) ja kasuta seejärel span-elementi nimega radio-on, et teha valitud ringikujuline efekt.
Internetis on palju ilustamise meetodeid, kuidas sildi ringiks muuta, kuid antud juhul tuleb üksik valikutekst paigutada sildi välisküljele, mistõttu tekstile klõpsates ei saa ühte valikuefekti muuta.
Seega lisasin sildile radio-bg, et teha tagaküljele suur ring, ja kasutasin radio-on nimelist vahet, et teha väike ring valiku eesosas.
Nii säilib sildi tekst ning ühevaliku mõju saab samuti välja lülitada.
Lisatud: jQuery võtab valitud raadio väärtusmeetodi
var val=$('input:radio[name="sex"]:checked').val();
Lisa kõik kolm meetodit:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Eelmine:Kuidas kasutada proxy-IP-d andmete kraapimiseks, PHP kraapijat Amazoni tooteandmete kraapimiseksJärgmine:Ajaxi, Axiose ja toomise
|
