a.selected και span.active

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

a.selected και span.active

Δημοσίευση από zekia » 09 Σεπ 2008 13:02

Γεια σας,

έχω μια σειρά από links που φορτώνουν περιεχόμενο στη σελίδα μου και θα θελα να κρατάνε το focus τους όταν επιλέγονται. Έχω τον παρακάτω κώδικα όμως δε δουλεύει σωστά

html

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

<div class="web_navigation_buttons" style="position&#58;static; bottom&#58;0%; float&#58;right;">
              <span id="web_button_1">1</span>
              <span id="web_button_2">2</span>
              <span id="web_button_3">3</span>
              <span id="web_button_4">4</span>
 </div>

css

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

.web_navigation_buttons&#123;padding&#58;5px;&#125;
.web_navigation_buttons span&#123;color&#58;#0080FF;padding&#58;0 5px;cursor&#58;pointer;&#125;
.web_navigation_buttons span.selected, .web_navigation_buttons span&#58;hover&#123;background&#58;#0080FF;color&#58;#fff&#125;
To background των link γίνεται μπλε κατα το hover και το click event, όμως εξαφανίζεται μετα το κλικ. Θα θελα να παραμένει μπλε μέχρι να επιλεχθει καποιο άλλο link.

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

a.selected και span.active

Δημοσίευση από dva_dev » 09 Σεπ 2008 15:56

Δοκίμασε κάπως έτσι:

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

<html>
<head>
<style type ="text/css">
a&#58;link &#123;padding&#58;5px;&#125;
a&#58;visited &#123;color&#58;#0080FF;padding&#58;0 5px;cursor&#58;pointer;&#125; 
a&#58;hover,
a&#58;focus &#123;background&#58;#0080FF;color&#58;#fff&#125;
</style> 
</head>
<body>
<a href="#">11111111111111111111111111111</a><br/> 
<a href="#">22222222222222222222222222222</a><br/> 
<a href="#">33333333333333333333333333333</a><br/>
</body>
</html>

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

a.selected και span.active

Δημοσίευση από zekia » 09 Σεπ 2008 16:13

Το γνωρίζω αυτό με το a:focus, όμως αν μετά κάνεις κλικ οπουδήποτε στη σελίδα, το focus χάνεται. Επομένως δεν λύνει το πρόβλημά μου :roll:

Καμία άλλη ιδέα?

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

a.selected και span.active

Δημοσίευση από dva_dev » 09 Σεπ 2008 17:17

Με Javascript και αλλάζεις το style manually.

Άβαταρ μέλους
_mentos_
Δημοσιεύσεις: 87
Εγγραφή: 20 Ιούλ 2005 21:57
Τοποθεσία: Βύρωνας
Επικοινωνία:

a.selected και span.active

Δημοσίευση από _mentos_ » 10 Σεπ 2008 03:25

δοκίμασε

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

<div class="web_navigation_buttons" style="position&#58;static; bottom&#58;0%; float&#58;right;">
              <span id="web_button_1" class="selected">1</span>
              <span id="web_button_2">2</span>
              <span id="web_button_3">3</span>
              <span id="web_button_4">4</span>
 </div>
θα πρέπει να αλλάζεις το selected item σε κάθε σελίδα του site σου κάθε φορά ;)

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

a.selected και span.active

Δημοσίευση από zekia » 10 Σεπ 2008 08:38

δυστυχώς δε μπορώ να το κάνω αυτό γιατί τα 1,2... παραμένουν σταθερά στη σελίδα και απλά συσχετίζονται με κάποιο κώδικα που φορτώνει περιεχόμενο σε iframe.

Τελικά κατέληξα στη λύση της javascript.

Σας ευχαριστώ για τις απαντήσεις και τις ιδέες σας. :D :D

aftos
Δημοσιεύσεις: 219
Εγγραφή: 08 Ιούλ 2004 13:57

a.selected και span.active

Δημοσίευση από aftos » 17 Σεπ 2008 23:46

zekia έγραψε:Τελικά κατέληξα στη λύση της javascript
Δηλαδή ποια είναι αυτή; Γιατί κι εμένα μ'ενδιαφέρει. Δηλαδή, χρησιμοποιώ το "a:visited {color: #0000A0}" και, ενώ έχω κάνει click, μετά δε μένει στο χρώμα που του ορίζω (ενώ το hover, ας πούμε, λειτουργεί κανονικά :o ). Όταν το βάζω στα properties της σελίδας λειτουργεί, όχι όμως στο css

ciao 8)

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

a.selected και span.active

Δημοσίευση από dva_dev » 18 Σεπ 2008 03:31

Δες μια πρόχειρη λύση εδώ

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

<html>
<head>
<style type ="text/css">
a, .plain                     &#123;padding&#58;5px;&#125;
a&#58;hover, a&#58;focus, a&#58;active, .selected   &#123;padding&#58;5px;background&#58;#0080FF;color&#58;#ffffff&#125;
</style>

<script language="javascript" type="text/javascript">
    last = null;

    function mark&#40;obj&#41;
    &#123;
        if &#40;obj != null&#41; obj.className = "selected";
        if &#40;last != null&#41; last.className = "plain";
        last = obj;
    &#125;
</script>
</head>
<body>
    <!-- Κρατάει το focus &#40;1&#41; -->
    <a href="#" onfocus="javascript&#58;mark&#40;this&#41;;">Preserve 1</a><br/> 
    <a href="#" onfocus="javascript&#58;mark&#40;this&#41;;">Preserve 2</a><br/> 
    <a href="#" onfocus="javascript&#58;mark&#40;this&#41;;">Preserve 3</a><br/>
    <hr>
    <!-- Δεν Κρατάει το focus &#40;2&#41; και το παίρνει και από το &#40;1&#41; -->
    <a href="#" onfocus="javascript&#58;mark&#40;null&#41;;">Lose 1</a><br/> 
    <a href="#" onfocus="javascript&#58;mark&#40;null&#41;;">Lose 2</a><br/>
    <a href="#" onfocus="javascript&#58;mark&#40;null&#41;;">Lose 3</a><br/>
    <hr>
    <!-- Δεν Κρατάει το focus &#40;3&#41; χωρίς να ανακατέυεται με το &#40;1&#41; -->
    <a href="#">Do not mess with Preserve 1</a><br/> 
    <a href="#">Do not mess with Preserve 2</a><br/>
    <a href="#">Do not mess with Preserve 3</a><br/>

</body>
</html>
[edit]
Σε firefox 3 kai ie7 καλό μου φαίνεται σε άλλους δεν το δοκίμασα.
[/edit]

aftos
Δημοσιεύσεις: 219
Εγγραφή: 08 Ιούλ 2004 13:57

a.selected και span.active

Δημοσίευση από aftos » 19 Σεπ 2008 21:42

Χμ, δεν γίνεται να το βάλω σε ξεχωριστό αρχείο .css; Γιατί δεν θέλω να κάνω edit σε όλες τις σελίδες που έχω.

ciao 8)

Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

a.selected και span.active

Δημοσίευση από fusion » 21 Σεπ 2008 12:44

Εννοειται, μπορεις να το βαλεις στο .css το οποιο ηδη εχεις αλλα και παλι δεν το γλυτωνεις το edit αν δεν εχεις ενα div γυρω απο τα links ωστε να του δειχνεις που θα "εφαρμοσει" αυτα τα attributes.;)

Ενα απο τα καλα της μεθοδου include("μια σειρά από links.php") (php)

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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