icher / cacher texte dans une div HTML JavaScript

Default
,

Bonjour ,

Je viens vers vous car je ne sais plus quoi faire . Je suis débutante en JavaScript* et mon problème est le suivant :

Ce que je fais

D'abord, avec mon code, tous les texte apparaissent en même temps alors que j'aimerai qu'un seul s'affiche à la fois et ne se cache après le click d'un des autres boutons.

Et pour finir le tout, mes boutons sont bien opé mais, il me semble, ne sont relié à rien ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
    <meta charset="UTF-8">
    <title>Accueil</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
    <script type='text/javascript' src='../lib/prototype.js'></script>

</head>

<body>

            <div class="limit_contenu_nous">
                <hr class="hr_droite">
                <h2> Pour tous les besoins </h2>
                <hr class="hr_gauche">
                <div class="boutons_trois_options">
                    <ul>
                        <li class="sous_bureau"><a href="#onglet_1"> Bureau </a>
                        </li>
                        <li class="sous_graphique"><a href="#onglet_2"> Graphique </a>

                        </li>
                        <li class="sous_tablettes"><a href="#onglet_3"> Tablettes </a>
                        </li>
                    </ul>

                        <div  id="onglet_1" class="onglet">
                            <p> texte1 </p>
                        </div>
                        <div id="onglet_2" class="onglet">
                            <p> texte 3 </p>
                        </div>
                        <div id="onglet_3" class="onglet">
                            <p>  texte 3 </p>
                        </div>

                </div>
                <section class="trois_options_contenu">
                </section>
            </div>
        </div>
    </div>


</body>


</html>


<script type='text/javascript'>
<!--
    // JavaScript Document
function setOnglet(id) {
  $$('div.onglet').each( function(e) { e.hide(); } );
  $(id).show();
  document.location.replace('#'+id);
}

function handleButton(event) {
  var e = Event.element(event);
  Event.stop(event);
  var current = e.href.split('#')[1];
  setOnglet(current);
}

var current = document.location.href.split('#')[1] || 'onglet_1';
setOnglet(current);

$$('.onglet_buttons a').each( function(e) {
  Event.observe(e, 'click', handleButton.bindAsEventListener(this));
});
//-->
</script>

Ce que je veux

J'aimerai qu'après le click d'un des mes trois bouton, un texte s'affiche. Lors de l'appui du second, le premier disparaisse pour laisser place à un deuxième texte dans la même DIV... etc.

Ce que j'obtiens

Les textes apparaissent en même temps :'(

14 Réponse

Default
, Il a répondu à ma question !

Je pense que tu peux faire comme ca avec jquery (j'appelle tes trois texte #1 #2 #3) en admettant que tu veuilles qu'au chargement de la page, le premier soit affiché.

$(document).ready(function(){

    $("#1").show();
    $("#2").hide();
    $("#3").hide();

    $("#afficherPremierTexte").click(function(){
        $("#1").show();
        $("#2").hide();
        $("#3").hide();
    });

    $("#afficherSecondTexte").click(function(){
        $("#1").hide();
        $("#2").show();
        $("#3").hide();
    });

    $("#afficherTroisièmeTexte").click(function(){
        $("#1").hide();
        $("#2").hide();
        $("#3").show();
    });

 });

Tiens moi au courant ;)

116231
, Il a répondu à ma question !

Pour améliorer un peu la propreté du code, je pense que sibling() ( http://devdocs.io/jquery/siblings ) fera l'affaire.
J'ai pas le temps de tester actuellement mais ca permet de cibler les element similaire a l'élement sur lequel tu agis :

$("#afficherPremierTexte").click(function(){
        $("bandeau paragraphe").slibings().show();
 });

Quelque chose de ce type :)

Default
, Il a répondu à ma question !

sytrys59, Bonjour

Merci pour vos réponses , mais je n'y comprends pas trés bien car je ne connais pas le language jQuery ... :-/
Je recherche plûtot quelque chose avec du javascript

merci à vous

47855
, Il a répondu à ma question !

Salut,

Dans ton titre tu parles de Java, et là tu nous exposes un souci en Javascript ? Pourquoi ?
Et il faut arrêter de tout le temps proposer jQuery comme la solution miracle ! Sérieusement, si plus personne ne sait dev avec Javascript, c'est à cause de ça ... tout ce que l'on fait avec jQuery est maintenant facilement reproduisible avec du vanilla JS.

Default
, Il a répondu à ma question !

Ca revient au même, temps qu'on a le résultat attendu. Chacun ses préférences.

47855
, Il a répondu à ma question !

Ce n'est pas une question de préference, mais une mauvaise pratique : charger une dépendance pour n'en utiliser de 0.05% n'a strictement aucun intérêt.

Default
, Il a répondu à ma question !

Utilisateur de JS plus par obligation que par goût, je vais au plus simple, enfin c'est relatif : surtout à ce que je connais.

116231
, Il a répondu à ma question !

pour moi, une techno répond a un besoin.
En l'occurrence on a a faire a une personne débutante qui n'a pas exprimée un problématique de perf importante.

si ca ne tenait qu'a moi bien sur que je suggererais de builder ses API et d'utiliser React, Vue, Inferno et autres merveilles pour le front.

mais jQuery est plus simple pour un débutant.

47855
, Il a répondu à ma question !

jQuery masque une grosse partie de la logique fonctionnelle inhérente à la manipulation du DOM. On ne donne pas une F1 à qqun qui passe son permis en lui disant "comme ça tu saura conduire vite, et tu y arrivera mieux avec ta voiture", c'est stupide ;)
Il faut d'abord apprendre les bases, et surtout comprendre ce qui se passe derrière !.. donc non je ne suis pas du tout d'accord avec toi the-smaug. C'est peut-être plus simple à utiliser, mais c'est une mauvaise idée pour un débutant.

116231
, Il a répondu à ma question !

notre désaccord me convient ^^ je prefere apprendre en partant d'un haut niveau d'abstraction pour plonger dans les technicités par la suite.
Je comprends que l'on puisse préferer l'inverse

47855
, Il a répondu à ma question !

En faite ce n'est pas une préférence, plus du vécu : j'ai également commencé par jQuery, et quand j'ai du faire du Vanilla JS j'ai bien galéré. Bon maintenant ça va je suis à l'aise, mais le souci est qu'on en a rrive à un point où beaucoup pensent que jQuery c'est Javascript.
Maintenant je comprends ton point de vue et je le respecte ;)

Default
, Il a répondu à ma question !

Bonjour,

Je sui fautive, j'ai mit Java aulieu de JavaScript, comme je l'avais mit dans le forum Javascript , j'ai utilisé le diminutif.
Pour mon code, je travaille qu'avec du html et css mais pour ce que je souhaire faire , j'ai lu que c'est plus fessable avec de javascript.
Le language jQuery je connais pas du tout, vraiment :'( donc je préfére ne pas travailler avec jQuery...

Merci merci

113544
, Il a répondu à ma question !

Salut!
Les gars il faudrait ouvrir un nouveau post pour reagir sur ce debat jQuerry/pas

Pour en venir à ta question: (un exemple)

var sb=document.getElementsByClassName("sous_bureau")[0]; //te permet de selectionner un bouton en mettant sa class
var sg=document.getElementsByClassName("sous_graphique")[0];
var sb=document.getElementsByClassName("sous_tablette")[0];
var toc=document.getElementsByClassName("trois_options_contenu")[0];//te permet de selectionner la div à modifieren mettant sa class

var sb = function (){//prepare la fonction qui va afficher le texte dans la div
toc.innerHTML="texte a afficher";
}
var sg= function (){
toc.innerHTML="texte a afficher";
}
var st= function (){
toc.innerHTML="texte a afficher";
}

sb.addEventListener("click",function(){fsb()}); //initialise le clique sur les boutons pour lancer une fonction (differente à chacun)
sg.addEventListener("click", function(){fsg()});
//fonctionne aussi comme ca:
st.addEventListener("click", fst) ;

espérant avoir réondu a ta question.

113544
, Il a répondu à ma question !

N'hesites pas à demander si tu as des questions ou si tu veux plus de précisions, ou encore si j'ai mal compris ta question :)

sinon à savoir si tu veux cacher un bouton ou une div ou autre, il suffit de modifier son css, ca peut etre fait depuis js grace à element.style.display="none";
pour le reaficher tu lui remet le display d'origine element.style.display="inline"; (par exemple)
element pourra etre préparé par un getElementsByClassName[0] (c'est plus simple d'utiliser les id pour js avec getElementById
ou alors tu prepare une classe dans le css (en dessous de celle qui fait reference à ton bouton) et tu lui met un display none manuellement dans le css et à l'aide de js tu ajoute une class à ta div
element.classList.add("classeaajouter")
pour revenir à l'initial il te suffira de la supprimer
element.classList.remove("classeasupprimer") et ton bouton reparaitra