html με link

Swan23

Γεια σας

Θα ήθελα τη βοήθεια σας.

Έχω δημιουργήσει μία λίστα με links που οδηγούν σε μία σελίδα με περιγραφές για τα ίδια τα links.

Γίνετε να βάλω τις περιγραφές στην ίδια σελίδα, δηλαδή όταν πατάμε ένα link να ανοίγει ακριβώς από κάτω του η περιγραφή του;

Σας ευχαριστώ.

alou

Σχετικά εύκολα, χωρίς javascript κάπως έτσι

http://codepen.io/alou/pen/ZGdaeb

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

<a href="#">Some link<span class="linkdesc">This is some link description</span></a>

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

a .linkdesc &#123;opacity&#58;0;transition&#58;all 0.3s linear 0s;text-decoration&#58;none;padding&#58;0 10px;&#125;

a&#58;focus .linkdesc &#123;opacity&#58;1;&#125;

Ανάλογα και το browser support που θες ίσως χρειάζεται και κάποια fallback.

Το link όμως δεν κατάλαβα, δεν θα πρέπει οδηγεί κάπου?

Swan23

Βασικά λάθος έθεσα την ερώτηση μου.

Θα το θέσω ως παράδειγμα.

Θέλω όταν πατάω την υπογραμμισμένη λέξη

Ιλαρά

να μου εμφανίζει ακριβώς από κάτω της πληροφορίες για την ιλαρά.

δεν θέλω να οδηγήσει σε άλλη σελίδα αλλά τοπικά ακριβώς από κάτω της.

alou

Τότε αυτό σε καλύπτει μια χαρά

http://codepen.io/alou/pen/OVeEPW

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

.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;

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

<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</span></a>
</div>

Swan23

Δεν μου βγαίνει....

Πρέπει να γράψω και τους 2 κώδικες. Το λέω αυτό επειδή ο 1ος είναι css και εγώ θέλω μόνο html...

alou

Δεν κατάλαβα... δε θες να χρησιμοποιήσεις css? τι θα πει δε σου βγαίνει?

Swan23

Έγραψα το κώδικα τον παρακάτω για να το δοκιμάσω:

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

<html>

<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</span></a>
	
</div>
</body>

</html>

Και το αποτέλεσμα ήταν το παρακάτω:

Click for info I am the info even more info for other stuff

alou

Ε ναι, πρέπει να βάλεις και στο css σου αυτό που σου έγραψα. Τι πρόβλημα ακριβώς υπάρχει?
Μόνο με html δεν γίνεται να κάνεις κάτι, χρειάζεσαι και css ή javascript αν για κάποιο περίεργο λόγο το προτιμάς.

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

<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</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</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</span></a>
</div>
</body>

</html>

Swan23

Έχεις δίκιο, ευχαριστώ για τη διόρθωση!

Να είσαι καλά!

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