[jquery] Aggiungere classe al click

C

Cloude

Nuovo Utente
5 Apr 2013
7
0
0
Ciao a tutti questo è il mio primo messaggio, spero in un vs aiuto :)

Ho questo menu http://gd83.altervista.org/example2/ a tendina
che al click mi aggiunge la classe "Selected" all'attributo href.

L'esempio postato è già funzionante però vorrei poter semplificare e migliorare questa parte codice evitando le ripetizioni di codice,
oppure se c'è un'alternativa al sistema utilizzato (che aggiunge la classe "selected" se l' elemento <li> supera i 30px).


Codice: 
<script type="text/javascript" language="javascript">
    $(document).ready(function () {

        function resizeFrame() {
            var divHeight = $('li#nameA').outerHeight();
            if (divHeight > 30) {
                $('li#nameA > a').addClass('Selected');
            } else {
                $('li#nameA > a').removeClass('Selected');
            }
        }
        setInterval(resizeFrame, 150);

        function resizeFrame2() {
            var divHeight = $('li#nameB').outerHeight();
            if (divHeight > 30) {
                $('li#nameB > a').addClass('Selected');
            } else {
                $('li#nameB > a').removeClass('Selected');
            }
        }
        setInterval(resizeFrame2, 150);

        function resizeFrame3() {
            var divHeight = $('li#nameC').outerHeight();
            if (divHeight > 30) {
                $('li#nameC > a').addClass('Selected');
            } else {
                $('li#nameC > a').removeClass('Selected');
            }
        }
        setInterval(resizeFrame3, 150);

    });
</script>

Grazie!
 
Ultima modifica:
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ciao, firbug mi segnala questi errori
"NetworkError: 404 Not Found - http://gd83.altervista.org/css/normalize.css"
"NetworkError: 404 Not Found - http://gd83.altervista.org/css/result-light.css"
ora provo il tuo codice
edit:
nel link che hai postato c'è un codice diverso
 
Ultima modifica:
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
provalo anche cosi
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title></title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <style type='text/css'>
            #tree {
                list-style-type:none;
                margin: 2em 0 0 2em;
                width: 20em;
            }
            #tree li {
                padding-bottom: 3px;
                margin-bottom: 0.5em;
                border-bottom: 1px solid #ccc;
            }
            #tree li a {
                display:block;
                color: #000;
                text-decoration: none;
            }
            #tree li ul {
                list-style-type:none;
                margin: 0.5em 0 0.5em 2em;
                display: none;
            }

            .Selected {
                background-color: #f00;	
            }
        </style>

        <script>
            $(document).ready(function(){
                $("#tree li ul").hide();
                $("#tree li").click(function(){
                    $("#tree li ul").slideUp();
                    $("#tree li a").removeClass("Selected");
                    if($(this).children("ul").css('display') == 'none') {                        
                        $(this).children("a").addClass("Selected");
                        $(this).children("ul").slideDown();
                    }
                        
                    return false;
                })
            })
        </script> 
    </head>
    <body>
        <ul id="tree">
            <li> <a href="#">nameA</a>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>      
                    <li>Item</li>
                </ul>
            </li>
            <li> <a href="#">nameB</a>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
            <li> <a href="#">nameC</a>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>            
                </ul>
            </li>
        </ul>
    </body>
</html>
 
C

Cloude

Nuovo Utente
5 Apr 2013
7
0
0
criric ha scritto:
ciao, firbug mi segnala questi errori
"NetworkError: 404 Not Found - http://gd83.altervista.org/css/normalize.css"
"NetworkError: 404 Not Found - http://gd83.altervista.org/css/result-light.css"
ora provo il tuo codice
edit:
nel link che hai postato c'è un codice diverso
Clicca per allargare...

Ciao Criric grazie mille per il tuo aiuto :)

Il codice è uguale solo che qui ho identato il codice per renderlo più leggibile.

L'esempio da te postato funziona alla grande, però io avrei la necessità
di semplificare solo quella parte di codice da me postata, senza modificare il restante js e html
perché fanno parte di un sorgente "chiuso" alla quale non posso mettere mano.

Inoltre c'è un problema, perché all'apertura della pagina uno dei menu potrebbe già essere impostato su "Selected"
perché richiamato da una pagina precedente, perciò avevo creato la funzione in base all'altezza della lista.


Grazie ancora :)
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
Nik Tab in jquery: aggiungere classe allo stato inattivo jQuery 1
F aggiungere codice dopo n elementi jquery jQuery 1
F aggiungere un link con jquery jQuery 2
M Aggiungere un preload ai contenuti con jquery jQuery 1
D Jquery - modifica elemenento onlick jQuery 1
E Problema jquery Success jQuery 2
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1

Discussioni simili

Alto Basso