Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από Swan23 » 12 Δεκ 2016 21:48

Γεια σας

Ψάχνω να συμπληρώσω τον παρακάτω κώδικα έτσι ώστε όταν επιλέγω μία φράση να μην γυρνάει η σελίδα πάλι από την αρχή. Δηλαδή δεν θέλω να ανεβαίνει προς τα πάνω και να χάνω αυτό που θέλω να δω. (Ο παρακάτω κώδικας είναι ένα απλό παράδειγμα)

Κώδικας: Επιλογή όλων

<html> 
<head> 
<style> 
.moreinfo a &#123;text-decoration&#58;none;color&#58;black;&#125; 
.moreinfo a .theinfo &#123;opacity&#58;0;transition&#58;all 0.3s linear 0s;text-decoration&#58;none;padding&#58;0 10px;display&#58;block;color&#58;grey;&#125; 
.moreinfo a&#58;focus .theinfo &#123;opacity&#58;1;&#125; 
</style> 
</head> 
<body> 

<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
<div class="moreinfo"> 
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff I am the info even more 
info for other stuff I am the info even more info for other stuff I am the info even more
info for other stuff I am the info even more info for other stuff I am the info even more 
info for other stuff</span></a> 
</div> 
</body> 

</html> 
Επίσης αν γνωρίζει κάποιος πως μπορούμε όταν κάνουμε πάλι κλικ στη φράση να εξαφανίζεται το περιεχόμενο της.

Ευχαριστώ
"Γίνε εσύ η αλλαγή που θες να δεις στον κόσμο"

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από korgr » 13 Δεκ 2016 09:25

Θεωρώντας πως έχεις διαθέσιμη την jquery στη σελίδα σου, αντικαθιστάς τα

Κώδικας: Επιλογή όλων

<a href="#">
με

Κώδικας: Επιλογή όλων

<a href="javascript&#58; void&#40;0&#41;" onclick="$&#40;this&#41;.remove&#40;&#41;">

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από Swan23 » 13 Δεκ 2016 21:17

Ευχαριστώ για την απάντηση korgr!
Βασικά δουλεύει το πρώτο που ζήτησα αλλά όχι το δεύτερο, δηλαδή η συνάρτηση remove() ενώ έχω βάλει στο <head>
το <script src="jquery-3.1.1.min.js"></script> και τοποθετήσει το αρχείο αυτό στην ίδια θέση με τα υπόλοιπα αρχεία.

Δεν ξέρω τι φταίει...δεν έχω χρησιμοποιήσει ποτέ jquery για να το διορθώσω. Έψαξα στα documentation jquery αλλά δεν μπόρεσα να βρω κάτι. Αν μπορείς να με βοηθήσεις.
"Γίνε εσύ η αλλαγή που θες να δεις στον κόσμο"

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από korgr » 13 Δεκ 2016 22:35

Την γραμμη την εβαλες, αλλα το script το έχεις στο σωστο path να το βρει;
Δοκίμασε και έτσι

Κώδικας: Επιλογή όλων

<a href="javascript&#58; void&#40;0&#41;" onclick="this.remove&#40;&#41;">

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από Swan23 » 14 Δεκ 2016 00:57

Το δοκίμασα και δεν βγαίνει...δοκίμασα και άλλες εντολές αλλά τίποτα.
Βασικά αν κατάλαβα καλά αυτή η συνάρτηση μόνο αφαιρεί και δεν το ξαναεμφανίζει...αν θέλω να ξαναεμφανίζεται;
Θα χρησιμοποιήσω toggle();
Αλλά που θα το βάλω και πώς; Όλα τα παραδείγματα έχουν buttons και όχι a=href...
"Γίνε εσύ η αλλαγή που θες να δεις στον κόσμο"

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από korgr » 14 Δεκ 2016 08:53

Τότε ναι η toggle()
Εναλλακτικά:
hide() κρύβει
show() επανεμφανίζει
Αλλα απο οτι καταλαβα δεν μπορεις να κανεις την jquery να δουλεψει, οποτε καμια απο αυτες τις εντολες δεν σου δινει λυση

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από fafos » 14 Δεκ 2016 13:36

auto pou zhtas legetai "accordion" kai yparxoun xiliades paradeigmata sto net.. psaxe gia "jquery accordion"
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

Μη παλιδρόμηση σελίδας προς τα πάνω όταν επιλέγω ένα θέμα τύπου click for information

Δημοσίευση από Swan23 » 12 Ιαν 2017 21:48

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

Καλή συνέχεια.
"Γίνε εσύ η αλλαγή που θες να δεις στον κόσμο"

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης