Comment puis-je cacher/montrer un div quand un bouton est cliqué?
j'ai un div qui contient un registre de l'assistant, et j'ai besoin de cacher/montrer ce div quand un bouton est cliqué.
Comment puis-je faire cela?
ci-dessous je vous montre le code.
Merci :)
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
</a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Perfil</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tr>
<td align="center" colspan="3"> </td>
</tr>
<tr>
<td align="right">Username :</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="txtBox">
</td>
<td align="left"><span id="msg_username"></span> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="txtBox">
</td>
<td align="left"><span id="msg_password"></span> </td>
</tr>
</table>
</div>
8 réponses
Utilisez JQuery. Vous devez configurer un événement de clic sur votre bouton qui va basculer la visibilité de votre div magicien.
$('#btn').click(function() {
$('#wizard').toggle();
});
voir la JQuery site web pour plus d'informations.
cela peut aussi se faire sans JQuery. En utilisant seulement le JavaScript standard:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
puis Ajouter onclick="toggle_visibility('id_of_element_to_toggle');" au bouton qui est utilisé pour montrer et cacher la div.
Ceci fonctionne:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
} <!DOCTYPE html>
<html>
<body>
<a href="javascript:showhide('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
</body>
</html>cela ne peut pas être fait avec seulement HTML/CSS. Vous devez utiliser javascript ici. En jQuery:
$('#button').click(function(e){
e.preventDefault(); //to prevent standard click event
$('#wizard').toggle();
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>
</head>
<body>
<div id="showhide"></div>
<div id="hide_show">
<p>This div will be show and hide on button click</p>
</div>
</body>
</html>
$('#btn').click(function() {
$('#wizard').toggle();
});
si vous voulez commencer par le div masqué, vous devez ajouter style="display:none;", comme ceci:
<div style="display:none;"> </div>
La solution suivante:
- plus brefs. Un peu similaire à ici. C'est aussi minime: la table dans le DIV est orthogonale à votre question.
- le plus rapide:
getElementByIdest appelé une fois au début. Cela peut ou non convenir à vos objectifs. - il utilise le JavaScript pur (c.-à-d. sans JQuery).
- Il utilise un bouton. Vos goûts peuvent varier.
- extensible: il est prêt à ajouter plus de DIVs, partageant le code.
mydiv = document.getElementById("showmehideme");
function showhide(d) {
d.style.display = (d.style.display !== "none") ? "none" : "block";
}#mydiv { background-color: #ddd; }<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
This div will show and hide on button click.
</div>la tâche peut être rendue javascript simple sans jQuery etc.
<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>
cette fonction est simple si l'énoncé qui regarde si assistant a la classe swMain et changer de classe en swHide et d'autre si ce n'est pas swMain puis modifier swMain. Ce code ne supporte pas plusieurs attributs de classe mais dans ce cas, c'est juste assez.
Maintenant vous devez faire la classe css nommée swHide que a display: none
puis Ajouter au bouton onclick="affichermasquer()"
Donc c'est facile.
vous pouvez le faire entièrement avec html et css et moi avons.
HTML
Tout d'abord vous donner la div que vous souhaitez cacher un ID cible #view_element et une classe de cible #hide_element. Vous pouvez si vous voulez faire ces deux classes, mais je ne sais pas si vous pouvez les faire toutes les deux. Puis avoir votre Show button cible votre show id et votre Hide button cible votre hide class. C'est pour le html, le masquage et l'affichage se fait dans le CSS.
CSS Le css pour montrer et cacher ceci devrait ressembler à quelque chose comme ceci
#hide_element:target {
display:none;
}
.show_element:target{
display:block;
}
cela devrait vous permettre de cacher et de montrer des éléments à volonté. Ça devrait bien marcher sur les travées et les divs.