J'ai deux boutons.
J'ai deux divs je veux montrer.
Chaque DIV a un contenu différent.
Je veux que les deux divs ne prennent que la même quantité d'espace sur la page.
Je le veux ainsi sur la charge de la page, Div1 est affiché, et s'ils cliquent sur Link Div2, Div1 disparaît et Div2 apparaît à sa place.
Quelle est la meilleure façon de faire cela? et comment?
7 Réponses :
dans un Cliquez sur HANDER, appelez $ ('# div1'). Masquer () et $ ('# div2'). Afficher () < / code>.
Toutes les trucs de CSS initiales et surchargent de côté et vous utilisez jQuery,
Je pense que vous recherchez quelque chose comme
Merci, quand Afficher Div2 est cliqué, il ne masque pas Div1 et montre Div2? Toute suggestion?
Je venais de remarquer que j'oublie les citations autour de Div1 et Div2. Vous aurez besoin de celles-ci. Aussi je suppose que vous avez donné Div1 et div2 ces identifiants dans les balises de div ...
<a href="javascript:;" onclick="javascript:showdiv('about');">About Us</a>
<a href="javascript:;" onclick="javascript:showdiv('contact');">Contact</a>
Charge de page:
$('#div1').hide(); $('#div2').show();
Fonctionne génial, comment pourrais-je faire cette charge le contenu d'une page différente de clic? Dis que je voulais div1 pour ouvrir le contenu de div1.php dans la DIV, et Div2 ouvre le contenu de div2.php ... etc.
Vérifiez sur Ajax et JQuery. C'est assez simple en fait, quelques tutoriels en ligne seront ravis d'aller avec.
La façon dont j'irais faire, c'est en donnant à chacun un identifiant unique d'abord (Div1 et Div2 suffirait). La DIV que vous voulez cachée devait avoir à l'intérieur de l'étiquette Style = "Afficher: Aucun" puis dans la balise de la DIV que vous souhaitez cliquer pour afficher les pièces masquées, utilisez ce type de code: onclick = "document.getElementyid ('div1 ') .style.display =' block '; document.getelementByID (' div2 '). Style.display = "Aucun"; " Juste inverser Div1 et Div2 de l'autre pour l'effet inverse.
Cela supposait que Div1 était caché et Div2 était visible au début.
Désolé, je n'ai pas lu la question correctement, c'est plus html que JavaScript. Ma faute.
Voir le code exemple ici ... J'espère que cela aide :)
note: Salut kyle, J'ai modifié mon code, ajouté quelques lignes de la courtoisie de Jessegavin
Ne répond pas à l'exigence selon laquelle "les deux divs ne tiennent que la même quantité d'espace sur la page".
Modifié mon message ... J'espère que l'idée aide :)
Cela ne fonctionnera que tant que la hauteur ne dépasse jamais 200px. Ma réponse permet à toute hauteur de div.
HTML STRAND> P>
$(function() {
// Make the divs have equal heights
var h1 = $("#div1").height();
var h2 = $("#div2").height();
$("#div1,#div2").height(Math.max(h1,h2));
// Then hide the second div
$("#div2").hide();
// Then add a click handlers to the buttons
$("#button1").click(function() {
$("#div1").show();
$("#div2").hide();
});
$("#button2").click(function() {
$("#div1").hide();
$("#div2").show();
});
})