display

A

akp

Utente Attivo
8 Giu 2015
133
0
16
buonasera,ho un problema con css, praticamente io ho una classe con un contenuto nascosto (display : none) e voglio che al click di un bottone questo contenuto venga mostrato,quindi nel javascript ho questo ocodice :
$("#id").click(function(event){
$(".classe").show();
});
il problema è che la classe non si visualizza rimane nascosta.
Qualcuno ha avuto questo problema?come potrei risolvere?
 
M

MikiProgrammer

Utente Attivo
9 Mag 2015
63
2
8
Prova così:

Codice: 
function mostraClasse(){
document.getElementByClassName('classe').style.display = 'block';
}

HTML: 
<a href="#" onclick="javascript:mostraClasse()"><br><div class="classe">Prova classe</div>
 
marino51

marino51

Utente Attivo
28 Feb 2013
3.204
207
63
Lombardia
l' esempio sottostante funziona benissimo, adattalo alla tua necessità
ciao
Marino
HTML: 
<script>
function script2() {
    var e = document.getElementById("pippo");
    if (e.style.visibility == 'hidden') {
        e.style.visibility = 'visible';
        e.style.display = 'block';
    } else {
        e.style.visibility = 'hidden';
        e.style.display = 'none';
    }
}
</script>
<div id="pippo">
Io scompaio e appaio!
<img src="input_type.png" width="220" eight="69" />
</div>
<input type="button" value="Clicca per far sparire/ricomparire" onClick="script2()" />
 
A

akp

Utente Attivo
8 Giu 2015
133
0
16
marino51 ha scritto:
l' esempio sottostante funziona benissimo, adattalo alla tua necessità
ciao
Marino
HTML: 
<script>
function script2() {
    var e = document.getElementById("pippo");
    if (e.style.visibility == 'hidden') {
        e.style.visibility = 'visible';
        e.style.display = 'block';
    } else {
        e.style.visibility = 'hidden';
        e.style.display = 'none';
    }
}
</script>
<div id="pippo">
Io scompaio e appaio!
<img src="input_type.png" width="220" eight="69" />
</div>
<input type="button" value="Clicca per far sparire/ricomparire" onClick="script2()" />
Clicca per allargare...

non va. ci deve essere qualche problema altrove.
ho provato a dare comandi anche da console ma non mi vuole fare comparire il form.
 
marino51

marino51

Utente Attivo
28 Feb 2013
3.204
207
63
Lombardia
may be ... come sempre capisco poco,
ma senza il tuo codice (quanto hai postato è insufficiente), difficile leggere il tuo computer ... da remoto

in ogni caso, quello che segue è un altro esempio pubblicato qui ... qualche "discussione" fa che funziona bene
ciao
Marino

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.theme.css">
<!--css-->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>

<script>
$(document).ready(function(){
//	test jquery
	var obj = document.getElementById("h01");
	obj.innerHTML = "Hello jQuery";

	$('#show-back').hide();
	$('#show-sx').hide();
	$('#show-dx').hide();

	$('#formid').on('click' ,'input[type=radio]', function(){
		if (this.id == "retro" && this.checked) {
			$('#show-back').show();
		} 
	});
    
	$('#formid').on('click' ,'input[type=radio]', function(){
		if (this.id == "sx" && this.checked) {
			$('#show-sx').show();
		} 
	});

	$('#formid').on('click' ,'input[type=radio]', function(){
		if (this.id == "dx" && this.checked) {
			$('#show-dx').show();
		} 
	});
});
</script>
</head>
<body>

<?php
echo 'test php' ;
?>

<div id="h01"> </div>

<form action="ricezione.php" method="POST" id="formid">

<p>FRONTE</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sul Fronte della t-shirt.</p>
<ul>
	<li><input type="radio" name="stampafronte" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stampafronte" value="1 colore" id="fronte">Stampa a 1 colore</li>
	<li><input type="radio" name="stampafronte" value="2 colori" id="fronte">Stampa a 2 colori </li> 
	<li><input type="radio" name="stampafronte" value="3 colori" id="fronte">Stampa a 3 colori </li>
	<li><input type="radio" name="stampafronte" value="4 colori" id="fronte">Stampa a 4 colori </li>
	<li><input type="radio" name="stampafronte" value="5 colori" id="fronte">Stampa a 5 colori </li>
	<li><input type="radio" name="stampafronte" value="6 colori" id="fronte">Stampa a 6 colori</li><hr>
    <li><input type="radio" name="stampafronte" value="6 colori" id="fronte">Ricamo</li>
</ul>

<p>RETRO</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sul Retro della t-shirt.</p>
<ul>
	<li><input type="radio" name="stamparetro" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stamparetro" value="1 colore" id="retro">Stampa a 1 colore</li>
	<li><input type="radio" name="stamparetro" value="2 colori" id="retro">Stampa a 2 colori </li> 
	<li><input type="radio" name="stamparetro" value="3 colori" id="retro">Stampa a 3 colori </li>
	<li><input type="radio" name="stamparetro" value="4 colori" id="retro">Stampa a 4 colori </li>
	<li><input type="radio" name="stamparetro" value="5 colori" id="retro">Stampa a 5 colori </li>
	<li><input type="radio" name="stamparetro" value="6 colori" id="retro">Stampa a 6 colori</li><hr>
    <li><input type="radio" name="stamparetro" value="6 colori" id="retro">Ricamo</li>
</ul>

<p>SPALLA SINISTRA</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sulla spalla sinistra</p>
<ul>
	<li><input type="radio" name="stampasinistra" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stampasinistra" value="1 colore" id="sx">Stampa a 1 colore</li>
	<li><input type="radio" name="stampasinistra" value="2 colori" id="sx">Stampa a 2 colori </li> 
	<li><input type="radio" name="stampasinistra" value="3 colori" id="sx">Stampa a 3 colori </li>
	<li><input type="radio" name="stampasinistra" value="4 colori" id="sx">Stampa a 4 colori </li>
	<li><input type="radio" name="stampasinistra" value="5 colori" id="sx">Stampa a 5 colori </li>
	<li><input type="radio" name="stampasinistra" value="6 colori" id="sx">Stampa a 6 colori</li><hr>
    <li><input type="radio" name="stampasinistra" value="6 colori" id="sx">Ricamo</li>
</ul>

<p>SPALLA DESTRA</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sulla spalla destra</p>
<ul>
	<li><input type="radio" name="stampadestra" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stampadestra" value="1 colore" id="dx">Stampa a 1 colore</li>
	<li><input type="radio" name="stampadestra" value="2 colori" id="dx">Stampa a 2 colori </li> 
	<li><input type="radio" name="stampadestra" value="3 colori" id="dx">Stampa a 3 colori </li>
	<li><input type="radio" name="stampadestra" value="4 colori" id="dx">Stampa a 4 colori </li>
	<li><input type="radio" name="stampadestra" value="5 colori" id="dx">Stampa a 5 colori </li>
	<li><input type="radio" name="stampadestra" value="6 colori" id="dx">Stampa a 6 colori</li><hr>
    <li><input type="radio" name="stampadestra" value="6 colori" id="dx">Ricamo</li>
</ul>

<div id="show_front"> <!-- cambio  fronte-->
<p>Cambio</p>
<ul>
	<li><input type="radio" name="cambio" value="Nessun Cambio" checked>Nessun cambio</li>
	<li><input type="radio" name="cambio" value="1colore" >1 colore</li>
	<li><input type="radio" name="cambio" value="2colore" >2 colori</li>
	<li><input type="radio" name="cambio" value="3colore" >3 colori</li>
	<li><input type="radio" name="cambio" value="4colore" >4 colori</li>
	<li><input type="radio" name="cambio" value="5colore" >5 colori</li>
	<li><input type="radio" name="cambio" value="6colore" >6 colori</li>	
</ul>
</div> <!-- cambio  fronte fine-->

<div id="show-back"> <!-- cambio  retro-->
<p> Dietro </p>
    <ul>
        <li><input type="radio" name="cambio_r" value="Nessun Cambio" >Nessun cambio</li>
        <li><input type="radio" name="cambio_r" value="1colore" >1 colore</li>
        <li><input type="radio" name="cambio_r" value="2colore" >2 colori</li>
        <li><input type="radio" name="cambio_r" value="3colore" >3 colori</li>
        <li><input type="radio" name="cambio_r" value="4colore" >4 colori</li>
        <li><input type="radio" name="cambio_r" value="5colore" >5 colori</li>
        <li><input type="radio" name="cambio_r" value="6colore" >6 colori</li>	
    </ul>
</div> <!-- cambio  retro -->

<div id="show-sx"> <!-- cambio  sinistra-->
<p>Sinistra</p>
    <ul>
        <li><input type="radio" name="cambio_s" value="Nessun Cambio" >Nessun cambio</li>
        <li><input type="radio" name="cambio_s" value="1colore" >1 colore</li>
        <li><input type="radio" name="cambio_s" value="2colore" >2 colori</li>
        <li><input type="radio" name="cambio_s" value="3colore" >3 colori</li>
        <li><input type="radio" name="cambio_s" value="4colore" >4 colori</li>
        <li><input type="radio" name="cambio_s" value="5colore" >5 colori</li>
        <li><input type="radio" name="cambio_s" value="6colore" >6 colori</li>	
    </ul>
</div> <!-- cambio  sinistra fine -->

<div id="show-dx"> <!-- cambio  destra-->
<p>Destra</p>
    <ul>
        <li><input type="radio" name="cambio_d" value="Nessun Cambio" >Nessun cambio</li>
        <li><input type="radio" name="cambio_d" value="1colore" >1 colore</li>
        <li><input type="radio" name="cambio_d" value="2colore" >2 colori</li>
        <li><input type="radio" name="cambio_d" value="3colore" >3 colori</li>
        <li><input type="radio" name="cambio_d" value="4colore" >4 colori</li>
        <li><input type="radio" name="cambio_d" value="5colore" >5 colori</li>
        <li><input type="radio" name="cambio_d" value="6colore" >6 colori</li>	
    </ul>
</div> <!-- cambio  destra fine -->

<button type="submit">Invia</button>
</form> 

</body>
</html>
 
A

akp

Utente Attivo
8 Giu 2015
133
0
16
grazie, sono riuscito ad individuare il problema. non avevo inserito questi
HTML: 
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
.
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M [WordPress] Home page not display adsense WordPress 0
M [PHP] Come display data nella stessa pagina PHP 4
F [WordPress] [HTML] Display Inline WordPress 2
KILLERIX Ghosting display Apple Mac e Software 1
felino [ASUS] Display prevalentemente rosso! Hardware 0
Alessandro Ad [ADNETWORK] Cosa ne pensate di Adbooth Display Network? Guadagnare col Sito 3
C Div display-table cn dentro tabelle HTML e CSS 1
filomeni Contenuti nascosti e SEO (Era: display:none) SEO e Posizionamento 7
Z Traffico geolocalizzato su ricerca molto basso: usare rete display? Google Ads (AdWords) 0
Z Restart della activity alla rotazione del display Sviluppo app per Android 1
GoshMaledetto Display:table su ie HTML e CSS 8
A [vendo] 1.000 visite tramite banner/display a soli 2€ Vendere e Acquistare pubblicita' online 0
F display error Web Server 0
max_400 display con immagini in sequenza Discussioni Varie 2
L non mi funziona display:inline HTML e CSS 1
J World clock with unique display Javascript 0
voldemort CSS display (come funziona?) HTML e CSS 1
W problema di spazi con display:block; HTML e CSS 0
borgo italia display block HTML e CSS 4
7 sostitituito display lcd per portatile Toshiba Hardware 0
cerbero display e float HTML e CSS 4

Discussioni simili

Alto Basso