Cambiare il css di una pagina con tasto "on off"

Koboshi

Nuovo Utente
7 Mag 2018
9
0
1
30
Ciau a tutti! Eccomi pronta col mio primo quesito! Spero di non aver sbagliato sezione..
Ho bisogno di cambiare il css di un div al click di un tasto toggle switch. In sostanza il tasto deve determinare se il contenuto del div sia "attivo" o meno quindi dovrebbe essere tutto normale in modalità "on" mentre dovrebbe essere velato di grigio in modalità "off". Il fatto è che non ho idea di come farlo in modo funzionale. Qualcuno di voi saprebbe aiutarmi? Ringrazio tutti mille volte in anticipo.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
Hai provato con JS
Esempio
Codice:
onclick="document.getElementById('id').style.......
 

Koboshi

Nuovo Utente
7 Mag 2018
9
0
1
30
Ho provato ma con jQuery e funziona solo che sono riuscita a farlo funzionare solo da off (che è lo stato iniziale) a on e non riesco a fare l'inverso. Devo spostare la discussione in un'altra sessione?
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Ciao, ti riporto qui la soluzione. Se ha bisogno di chiarimento chiedi pure
HTML:
 <style>
                .on{background-color: #fff;}
                .off{background-color: #ccc;}
 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
            jQuery(document).ready(function(){
                jQuery("#tasto").click(function(){
                    if(jQuery("#mydiv").hasClass("on")){
                        jQuery("#mydiv").removeClass("on").addClass("off");
                    }
                    else {
                         jQuery("#mydiv").removeClass("off").addClass("on");
                    }
                });
            });
  </script>

            <button id="tasto" type="button">Tasto</button>
            <div id="mydiv" class="off">Contenuto div</div>
 

marino51

Utente Attivo
28 Feb 2013
3.016
174
63
Lombardia
nella "cassetta degli attrezzi" ho trovato questa soluzione che mi sembra carina ….
HTML:
<script>
$(document).ready(function () {
    $("#bottone").click(function () {
        $("#box").toggle("slow", function () {
            if ($(this).is(':visible')) {
                $("#bottone").val("Nascondi");
            } else {
                $("#bottone").val("Mostra");
            }
        });
    });
});
</script>

<div id="box">
Io scompaio e appaio!
<img src="input_type.png" width="220" eight="69" />
</div>
<input id="bottone" type="button" value="Nascondi" />
 
Discussioni simili
Autore Titolo Forum Risposte Data
L CSS, cambiare i colori della barra e ingrandire una immagine WordPress 1
ecosito CSS: è possibile cambiare font con uno non di uso comune? HTML e CSS 11
B Javascript: Cambiare valore Css Javascript 1
N cambiare css in base alla larghezza dello schermo Javascript 10
V Aiuto su Stile CSS cambiare colore ad un modulo Joomla 1
blacksbugs Cambiare sfondo alle voci dei menù [CSS] HTML e CSS 3
N Come cambiare l'altezza della "zona lavoro" nel css?? HTML e CSS 1
W css-come cambiare lo sfondo del sito HTML e CSS 4
U pannellino per cambiare colore alle pagine tramite css e JS Javascript 6
G Come cambiare un css con javascript ?? HTML e CSS 0
Y cambiare sfondo di una pagina Javascript 1
E Cambiare lingua in Elements per Mac Mac e Software 2
R Non riesco a cambiare l'immagine di sfondo PHP 4
K Cambiare font size su echo stringa variabile PHP 24
V [PHP Symphony] Cambiare da ApcCache ad OpCache PHP 4
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
L [PHP] cambiare gli if in un url semplice PHP 1
G Cambiare colore ad un record database mysql MySQL 0
Domenico_Falco1 Cambiare url in un sito con pagine dinamiche Ajax 4
L Cambiare classi solo scroll up jQuery 2
Topografo Buon 2019 (Tutti gli altri hanno scritto "Salve a tutti", cerchiamo di cambiare) Presentati al Forum 1
joomeph Cambiare Nome Utente Supporto Mr.Webmaster 3
M [Visual Basic] Cambiare lo stato in checked delle checkbox richiamando dati dal database Visual Basic 6
Licantropo [MySQL] Cambiare le date MySQL 4
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
L Cambiare nome pagina facebook Annunci servizi di Social Media Marketing 4
P [HTML] Wordpress - cambiare font di un tema WordPress 1
L APPARECCHIO VOIP DA CAMBIARE Adsl e Connettività 0
T cambiare formato in uscita timestamp Database 0
O Allo scroll cambiare colore di sfondo jQuery 0
crealatualista [Javascript] Cambiare record tabella... Javascript 4
napuleone [Javascript] cambiare i parametri di stampa con js Javascript 2
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V javascript - cambiare immagine di sfondo di un div Javascript 3
D [Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana Javascript 11
B CAMBIARE PAGINA INIZIALE PHPMYADMIN MySQL 2
webmachine [WORDPRESS] Cambiare titolo pagina articoli WordPress 0
webmachine [WOOCOMMERCE][WORDPRESS] Cambiare testo pulsante Acquista E-Commerce 0
webmachine [PRESTASHOP] Cambiare ordine prezzo-sconto-prezzoscontato E-Commerce 1
B CAMBIARE TEMPLATES PHPMYADMIN MySQL 0
otto9due Dreamweaver CC 2017 - cambiare colorazione codice Windows e Software 5
webmachine [JQUERY] Cambiare immagine al click, toggle jQuery 1
A Cambiare Risposta onclick con Switch. Javascript 1
V Cambiare colore ad un button HTML e CSS 3
E Cambiare l'option di un select con jquery jQuery 1
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Shyson Cambiare color all'onclick Javascript 9
elettroweb come cambiare testo Flash 0
M Cambiare dinamicamente il contenuto di un DIV Javascript 4
M Cambiare valore ad un campo in base alla selezione fatta nel menu a tendina PHP 16

Discussioni simili