Beginnen Sie mit Text versteckt, onclick text anzeigen

Dies ist alles auf jeden Fall über meinem Kopf, aber ich hatte zu Fragen. Alles, was ich wirklich tun möchten, ist zu beginnen mit dem text versteckt, haben Sie nur die Schaltfläche ANZEIGEN, und klicken Sie auf den text angezeigt. Es ist ein Französisch Dictée Website, wo jemand hört auf einen französischen Satz, schreibt, was er denkt, er hört ein Formular-text-Feld ein, klickt dann auf die Schaltfläche ANZEIGEN, um zu sehen, ob er es richtig gemacht. Ich habe versucht, die änderung der P-tag, um die Sichtbarkeit versteckt, aber dann Klick auf die Schaltfläche ANZEIGEN, wird nicht verraten es.

Suchte ich unter dem Knebel, aber keine der Antworten schien zu passen mir.

Hier ist die einzige Antwort, die von der Suche in Ihrem Ort, das nahe kommt, aber ich kann nicht den text zu beginnen versteckt, dann zeigen Sie es, indem Sie auf die Schaltfläche ANZEIGEN.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Vielen Dank für jede Hilfe.

Barry

Okay, ja, ich habe gesehen, dass, aber, die noch offen ALLE P Tags auf der Seite mit display:none. Was ich möchte ist, einzelne Passagen der fähig ist, offenbart ein Klick auf eine Schaltfläche. Diese ein-und AUSBLENDEN von Schaltflächen öffnen Sie JEDEN Absatz.

Zum Beispiel auf meiner Website,

http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee

Habe ich zwei Durchgänge, eine in Französisch und eine in Englisch. Ich möchte die Benutzer in der Lage sein zu ZEIGEN, die Französisch, während die englische versteckt, und Umgekehrt ZEIGEN die Engländer, während die Franzosen versteckten. Möglich? Nein? Ja?

Wie immer vielen Dank für jede Hilfe.

Barry

Wenn diese Antwort Ihnen geholfen, bitte akzeptiert diese als Antwort...

InformationsquelleAutor Barry Glick | 2013-10-02

5

Jquery ein-und ausblenden, wechseln element display Eigenschaft nur, nicht die Sichtbarkeit. Sie können entweder das element display:none zunächst oder ändern Sie die visibility statt hide/show.
```
  var $p = $('p');
  $("#hide").click(function(){
    $p.css('visibility', 'hidden');
  });
  $("#show").click(function(){
    $p.css('visibility', 'visible');
  });
```
oder einfach nur:
```
 $("#hide, #show").click(function(){
      $('p').css('visibility', this.id == "show" ? 'visible' : 'hidden');
  });
```
Demo

oder in der ersten style-set
```
p{ /*This can vary based on which p you want to hide first*/
   display: none; /*Instead of visibility*/
}
```
und nur eine verkürzte version.
```
$(document).ready(function () {
    $("#hide, #show").click(function () {
        $("p").toggle(this.id == "show");
    });
});
```
Demo

Beachten Sie, dass die display-Eigenschaft wird nehmen Sie das element aus der Seite fließen, gibt es nicht Raum für Sie reserviert, in der Falle der Transparenz, die Sie werden sehen, den leeren Raum reserviert, der durch das element
- Verwenden Sie diese, aber verwenden Sie die auf.('click',function(){}) notation statt.
- mit .klicken Sie auf() ist durchaus akzeptabel.
- Ich weiß, ich bin eigentlich nicht zu sagen, vielen Dank, also so viel wie ich will, ich will nicht, aber ich würde gerne nuance wie das funktioniert ein bisschen. Dumm mich, ich dachte, dass alle ich tun musste, war ersetzen Sie das "p" in der obigen Funktion und dann konnte ich ein-und ausblenden eines div, das ist wirklich das, was ich gerne tun würde. Dies, leider, nicht funktioniert. Ich weiß, dass meine Kenntnisse in javascript sollte besser sein. Hier ist, was ich bekomme: techno-french.com/learn-french-online-free/.... Ich will den gesamten text in weißen Buchstaben auf blauem hintergrund.
- Bitte zeigen Sie Ihre vollständigen code, der das Problem verursacht in einem fiddle-demo.
- Tut mir Leid, ich weiß nicht, was eine Geige demo ist. Ich kann Ihnen einen link zu der Seite: techno-french.com/learn-french-online-free/.... Der code ist genau wie oben, außer ich habe versucht, indem Sie den "p"mit "div"
- Ich bin sehr Leid, wenn ich nicht bin, soll es so machen, aber ich bearbeitete meinen ursprünglichen post. Ich gehe davon aus, dass ich nicht auf meine Frage mit diesem Kommentar-box, richtig? Würden Sie bitte einen Blick auf meine revision, oben, Sie werden sehen, ich habe noch nicht ganz die Lösung die ich Suche. Ich hoffe, es ist einer. Danke!
- Hoppla! Es scheint, dass ich nicht nach unten scrollen weit genug. Es scheint eine andere Antwort. Lassen Sie mich sehen, wie es funktioniert. Danke!!
- Ja. Getestet habe ich die oben genannten Vorschläge und das ein-und AUSBLENDEN von Schaltflächen einfach ein-oder ausschalten JEDER P-tag. So, dies funktioniert nicht für mich. Irgendwelche anderen Vorschläge?
InformationsquelleAutor PSL

versuchen, legen Sie die display:none funktioniert

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p style="display:none">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

InformationsquelleAutor Luan Castro

Ich war auf der Suche nach der Antwort, wie auch, jedoch, was für mich gearbeitet war dieser kleine code von JQuery:

<div style="display: none;" id="hiddenText">This is hidden</div>
<a href="#" onclick="$('#hiddenText').show(); return false;">Click here to show hidden 
text</a>