Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    762

    Assegnare una classe CSS dinamicamente. Php? Php+Javascript?

    Ciao raga,

    mi sto leggermente scervellando perchè non capisco quale metodo adottare.

    Ho un file che contiene un menu principale. Questo file viene incluso in ogni pagina del sito web. A seconda della pagina (index.php, contatti.php, ecc.) c'è un file che imposta voci di menu (inglese, italiano, ecc..) e i rispettivi collegamenti tra pagine (valore di href del tag A).

    Ora..se ad esempio mi trovo in pagina CONTATTI, giustamente la voce di menu CONTATTI avrà un colore diverso rispetto alle altre voci di menu..ma..come gli assegno la classe css??

    Php? Php+Javascript?

    Sto provando diverse soluzioni ma non c'arrivo. Oggi sto intoppato.

    Esempio, siamo su pagina CONTATTI:
    Codice PHP:
    <ul>
        <a href="<?php echo $link1?>">
            <li class="elem-menu"><?php echo $voce1?>
        </a>
        <a href="<?php echo $link2?>">
            <li class="elem-menu ELEMENTO-ATTIVO"><?php echo $voce2?>
        </a>
        <a href="<?php echo $link3?>">
            <li class="elem-menu"><?php echo $voce3?>
        </a>
        <a href="<?php echo $link4?>">
            <li class="elem-menu"><?php echo $voce4?>
        </a>
        <a href="<?php echo $link5?>">
            <li class="elem-menu"><?php echo $voce5?>
        </a>
            <li id="lang" class="elem-menu"><?php echo $voce6?>[/list]
    Non c'arrivo..

  2. #2
    Ciao,
    come al solito molto dipende dall'architettura generale del tuo progetto...

    In ogni caso UN modo (non certo l'unico) è far gestire gli elementi del menu principale che includi in ogni pagina da alcune funzioni Javascript (contenute in un file che anch'esso caricherai in ogni pagina necessaria) e dal relativo file css (anch'esso caricato in ogni pagina necessaria)

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    762
    Ciao phil, grazie per il supporto.

    ..mmmh non so. La vedo un pò macchinosa. C'ho un vuoto mentale!

    Cioè, come faccio ad assegnare la classe CSS "pagina-attiva" quando ci troviamo sulla pagina in questione...se, ad esempio, l'href del tag A che racchiude il LI è vuoto? ( href="#" )

    In questo momento, tramite php, "svuoto" l'href del tag A che racchiude l'elemento con la voce della pagina in cui ti trovi.

    Ad esempio: sei su contatti.php Quindi l'href del tag A che racchiude l'elemento LI con la voce "Contatti" sarà uguale a href="#". Così:

    codice:
    <a href="#">  <-- eccolo
     <li class="elem-menu">Contatti <!-- la voce "Contatti" è data dinamicamente con php
    </a>
    <a href="about.php"> <-- .. ed anche le voci di collegamento agli altri file.
     <li class="elem-menu">About
    </a>


    A meno che evito di "svuotare" l'href della pagina in cui ci si trova e bom...verifico che il pezzetto di PHP_SELF che estraggo sia uguale alla voce di menu..e tramite Javascript assegno la classe CSS.

    Magari così:

    Codice PHP:
    <?php
    if ($pezzoDiLink == $voceDiMenu) {

      echo 
    "...codice javascript...";

    }
    ?>
    <a href="contatti.php"> 
     <li class="elem-menu ELEMENTO-ATTIVO">Contatti <?php // Assegnata tramite JS ?>
    </a>
    <a href="about.php">
     <li class="elem-menu">About
    </a>


    Che dici? Che dite?

    Thanks

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    762
    Risolto.

    Tramite PHP ottengo la posizione. Taglio a dovere il link e lo inserisco nello script JS.

    Così:
    Codice PHP:
    <script type="text/javascript">
    window.onload = function() {
        var l = '<?php echo $link?>';
        var ll = document.getElementsByTagName('li');

        switch(l) {
            case 'contatti.php':
                ll[2].className='elem-menu-active';
                break;
            default:
                alert('alert dello switch: niente');
                break;
        }
    }
    </script>
    Grazie mille. Restano sempre ben accetti consigli per impostare il tutto in maniera ancora più ottimale.


Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.