Προς το περιεχόμενο

Show/hide text script

dimantonak

Από τον dimantonak
στο Προγραμματισμός

Προτεινόμενες αναρτήσεις

dimantonak Proficient

dimantonak

Δημοσ.
Δημοσ.

Θέλω να φτιάξω ένα script που να κάνει το εξής:

Πατάμε (είτε button είτε href) και εμφανίζεται ένα κείμενο και παράλληλα να γίνεται αντικατάσταση (είτες του αρχικού button ή href) με κάτι άλλο και να γίνεται απόκρυψη του κειμένου ξανά.

Ελπίζω να έγινα κατανοητός σε αυτό που ζητάω. Είναι αρκετά εύκολο αλλά εγώ δεν έχω τις επαρκής γνώσεις προγραμματισμού ωστε να κάνω την αντικατάσταση του button ή του href που έχω δώσει αρχικά για να κάνω την απόκρυψη.

 

Ευχαριστώ εκ των προτέρων

drm Experienced

drm

Δημοσ.
Δημοσ.

Μπορείς να το κάνεις με χρήση DIVs και συναρτήσεων...

>
<SCRIPT language=JScript>
 function Show() {    
     document.all['Content'].style.display = "inline"; 
     document.all['ShowCMD'].style.display = "none";
     document.all['HideCMD'].style.display = "inline";
 } 
 function Hide() {
     document.all['Content'].style.display = "none"; 
     document.all['ShowCMD'].style.display = "inline";
     document.all['HideCMD'].style.display = "none";
  }

 }
 
</SCRIPT>


<DIV ID="ShowCMD">
 <a href="javascript:Show()"> ShowContent</a> 
</DIV>
<DIV ID="HideCMD" style="Display: none"> 
 <a href="javascript:Hide()">Hide Content</a>   
</DIV>

<DIV ID="Content" style="Display :none"> 
 <P> Oti thelw edw mesa </P> 
</DIV>

 

Δεν το εχω δοκιμασει ακριβώς έτσι όπως το έγραψα αλλά η ιδεα είναι να παίζεις με το dispay=inline/none των <DIV>

 

καλή τύχη.

  • Moderators
Praetorian Crazy Insomniac

Praetorian

Δημοσ.
  • Moderators
Δημοσ.

Δεν έχω καταλάβει απόλυτα τι ψάχνεις dimantonak, αλλά όπως προτείνει και ο drm μάλλον θα χρησιμοποιήσεις Javascript γι'αυτό που θέλεις.

 

Επίσης μπορείς να ρίξεις και μια ματιά στις συναρτήσεις

innerHTML()

outerHTML()

 

που μπορούν να αλλάξουν τα περιεχόμενα ενός tag ή ολόκληρο το tag (μαζί με τα περιεχόμενα του) δυναμικά (σε κάποιο javascript event).

dimantonak Proficient

dimantonak

Δημοσ.
  • Μέλος
Δημοσ.

Βασικά ο drm έπιασε αυτό που θέλω αλλά δυστυχώς δεν παίζει. Όποιος μπορεί να το τροποποιήσει θα μου κάνει χάρη. Δυστυχώς όπως προανέφερα δεν έχω επαρκείς γνώσεις σε javascript για να παίζω με συναρτήσεις κ έτσι στηρίζομαι αποκλειστικά στη βοήθειά σας...

drm Experienced

drm

Δημοσ.
Δημοσ.

Τώρα ?

 

>

<html>
<head></head>
<body>

<SCRIPT language=JScript>
 function Show() {    
     document.all['Content'].style.display = "inline"; 
     document.all['ShowCMD'].style.display = "none";
     document.all['HideCMD'].style.display = "inline";
 } 
 function Hide() {
     document.all['Content'].style.display = "none"; 
     document.all['ShowCMD'].style.display = "inline";
     document.all['HideCMD'].style.display = "none";
  }

 
 
</SCRIPT>


<DIV id="ShowCMD">
 <a href="javascript:Show()"> ShowContent</a> 
</DIV>
<DIV id="HideCMD" style="Display: none"> 
 <a href="javascript:Hide()">Hide Content</a>   
</DIV>

<DIV id="Content" style="Display :none"> 
 <P> Oti thelw edw mesa </P> 
</DIV>
</body> 
</html>

 

 

Ορίστε όλο και όλο υπήρχε μία '}' παραπάνω (έβαλα και τα <html> <head> <body> tags)

 

ΑΥΤΟ ΔΟΥΛΕΥΕΙ ΜΙΑ ΧΑΡΑ ΣΤΟΝ EXPLORER MOY.

dimantonak Proficient

dimantonak

Δημοσ.
  • Μέλος
Δημοσ.

Ευχαριστώ drm

Πριν είχα ξεχάσει να το τσεκάρω σε ie, όντως παίζει κ είναι ακριβώς αυτό που ζητούσα.

Δεν παίζει πάντως στον firefox - και θα επιθυμούσα να είναι συμβατό με όλους τους browsers.

drm Experienced

drm

Δημοσ.
Δημοσ.

Ψάξε στο google να δεις εάν ο FF υποστιρίζει το document.all['...'] και εάν δεν το υποστηρίζει να δεις τι ακριβώς θέλει (πχ document.all.getElementById('...') )

 

ΠΡΟΣΟΧΗ η JavaScript είναι Case Sensitive...

dimantonak Proficient

dimantonak

Δημοσ.
  • Μέλος
Δημοσ.

Πράγματι, ο firefox δεν υποστηρίζει το document.all. Πέρασα το document.getElementById αλλά κ πάλι είχα τα ίδια αποτελέσματα.

Το έκανα έτσι:

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>

 

<SCRIPT language=JScript>

function Show() {

document.getElementById("Content").style.display = "inline";

document.getElementById("ShowCMD").style.display = "none";

document.getElementById("HideCMD").style.display = "inline";

}

function Hide() {

document.getElementById("Content").style.display = "none";

document.getElementById("ShowCMD").style.display = "inline";

document.getElementById("HideCMD").style.display = "none";

}

 

 

 

</SCRIPT>

 

 

<DIV id="ShowCMD">

<a href="javascript:Show()">Προβολή</a>

</DIV>

<DIV id="HideCMD" style="Display: none">

<a href="javascript:Hide()">Απόκρυψη</a>

</DIV>

 

<DIV id="Content" style="Display :none">

<P>μπλα μπλα μπλα</P>

</DIV>

</body>

</html>

dimantonak Proficient

dimantonak

Δημοσ.
  • Μέλος
Δημοσ.

Έκανα κάποιες αλλαγές κ εν τέλει παίζει σε όλους τους browsers. Ευχαριστώ για τη βοήθεια.

 

><script>
function Show() {
document.getElementById("Content").style.display = "inline";
document.getElementById("ShowCMD").style.display = "none";
document.getElementById("HideCMD").style.display = "inline";
}
function Hide() {
document.getElementById("Content").style.display = "none";
document.getElementById("ShowCMD").style.display = "inline";
document.getElementById("HideCMD").style.display = "none";
}



</script>


<div id="ShowCMD">
 <div align="center"><a href="javascript:Show()" class="LabelBold">Συχνές Ερωτήσεις</a>  </div>
</div>
<div id="HideCMD" style="Display: none">
 <div align="center"><a href="javascript:Hide()">Απόκρυψη</a>
 </div>
</div>

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...