2013-10-02 16 views
8

To wszystko zdecydowanie nad moją głową, ale musiałem zapytać. Wszystko, co naprawdę chcę zrobić, to zacząć od tekstu ukrytego, mieć tylko przycisk POKAŻ i kliknąć go, aby wyświetlić tekst. To jest na francuskiej stronie Dictée, gdzie ktoś słucha francuskiego zdania, pisze, co myśli, że słyszy w polu tekstowym formularza, a następnie klika przycisk POKAŻ, aby zobaczyć, czy dobrze to zrobił. Próbowałem zmienić tag P na ukrytą widoczność, ale kliknięcie przycisku POKAŻ nie ujawni tego.Zacznij od tekstu ukrytego, pokaż tekst onclick

Szukałem pod przełącznikiem, ale żadna z odpowiedzi nie pasowała do mojej.

Oto jedyna odpowiedź z wyszukania witryny, która się do niej zbliża, ale nie mogę ukryć tekstu, a następnie odsłonić go, klikając przycisk POKAŻ.

<!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> 

Dzięki za pomoc.

Barry

Ok, tak, widziałem to, ale że nadal będzie otwierać żadnych tag P na stronie z display:none. To, czego chcę, to posiadanie poszczególnych fragmentów, które można ujawnić, klikając przycisk. Te przyciski UKRYJ i POKAŻ otwierają KAŻDY akapit.

Na przykład, na moim miejscu,

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

Mam dwa kanały, jeden w języku francuskim i jedną w języku angielskim. Chciałbym, aby użytkownicy mogli POKAZUĆ Francuzów, zachowując angielski w ukryciu, i na odwrót. POKAŻ angielski, zachowując ukryty język francuski. Możliwy? Nie? Tak?

Jak zawsze, dziękuję za pomoc.

Barry

+0

Jeśli którykolwiek z tych odpowiedzi pomógł Ci proszę przyjąć dowolny z nich jako odpowiedzi ... – PSL

Odpowiedz

5

Jquery ukrywania i wyświetlania można przełączać elementu display właściwość tylko, nie widoczności. Możesz najpierw utworzyć element display:none lub zmienić visibility zamiast hide/show.

var $p = $('p'); 
    $("#hide").click(function(){ 
    $p.css('visibility', 'hidden'); 
    }); 
    $("#show").click(function(){ 
    $p.css('visibility', 'visible'); 
    }); 

lub po prostu:

$("#hide, #show").click(function(){ 
     $('p').css('visibility', this.id == "show" ? 'visible' : 'hidden'); 
    }); 

Demo

lub w początkowej stylu ustawić

p{ /*This can vary based on which p you want to hide first*/ 
    display: none; /*Instead of visibility*/ 
} 

i tylko w wersji skróconej.

$(document).ready(function() { 
    $("#hide, #show").click(function() { 
     $("p").toggle(this.id == "show"); 
    }); 
}); 

Demo

Uwaga który wyświetla nieruchomość odbędzie element z przepływem strona tam przyzwyczajenie się przestrzeń zarezerwowana dla niego, w przypadku widoczności widać pustą przestrzeń zarezerwowaną przez element

+0

Użyj tego, ale zamiast tego użyj notacji "kliknij", funkcja() {}). – KnowHowSolutions

+2

@KnowHowSolutions - używanie _.click() _ jest całkowicie dopuszczalne. – nnnnnn

+0

Wiem, że nie powinienem mówić, dziękuję, tak bardzo, jak chcę, nie będę, ale chciałbym niuansować, jak to działa. Głupiutki, myślałem, że wszystko, co muszę zrobić, to zastąpić "p" w powyższej funkcji, a następnie mogę pokazać i ukryć div, co jest naprawdę tym, co chciałbym robić. To, niestety, nie działa. Wiem, że moja znajomość javascript powinna być lepsza. Oto, co otrzymuję: http://techno-french.com/learn-french-online-free/resureing-french-dictees-to-learn-french. Chcę, aby cały tekst był białymi literami na niebieskim tle. –

1

spróbować umieścić display: none zadziała

<!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> 
0

szukałem odpowiedzi, jak również, jednak, co pracował dla mnie był to mały kod 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> 

Demo

Source

Powiązane problemy