[jquery] Aggiungere classe al click

Cloude · 5 Apr 2013

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!

Cloude · 11 Apr 2013

Nessun aiuto? :crying:

criric · 11 Apr 2013

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

criric · 11 Apr 2013

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>

Cloude · 12 Apr 2013

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

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

Cerca

Cerca

[jquery] Aggiungere classe al click

Cloude

Nuovo Utente

Cloude

Nuovo Utente

criric

Super Moderatore

criric

Super Moderatore

Cloude

Nuovo Utente

Discussioni simili