Tab in jquery: aggiungere classe allo stato inattivo

Nik

Utente Attivo
15 Set 2004
92
1
8
33
Ciao a tutti!
Ho la necessità di utilizzare uno script per far visualizzare un semplicissimo tab di contenuti in orizzontale, ad esempio come quelli inseriti qui sotto:

1. http://webtrendset.com/demo/easy-responsive-tabs/Index.html#horizontalTab1
2. http://tympanus.net/Blueprints/FullWidthTabs/

Cliccando su uno dei tanti tab, viene assegnata una classe generalmente "active", personalizzabile in tutto. Il mio problema è invece assegnare, tramite lo stesso script, una classe "inactive" agli elementi che non sono stati selezionati.. differenziandoli così dallo stato di default.

Vi spiego meglio. Devo realizzare un tab con tre voci che abbiamo di sfondo tre immagini di prodotto. Cliccando su un tab qualsiasi l'immagine si visualizza con i colori pieni e alle altre vorrei applicare un filtro di opacità.

Come potrei risolvere il mio problema? :byebye:
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi usare i metodi removeClass() e addClass() per rimuover o aggingere una classe ad un elemento.
un esempio veloce
HTML:
<html>
    <head>
        <title>Opacity tab</title>
        <style type="text/css">
            div.tab {                  
                width: 200px;
            }
            div.tab ul {
                margin:0;
                padding:0;
                list-style-type: none;
            }
            div.tab ul li {
                float:left;
                margin:0 2px;
            }
            div.tab ul li img {
                width: 40px;
                opacity: .2;
                cursor: pointer;
            }
            div.tab img.show {
                clear: both;
                width: 200px;
            }
            div.tab ul li.current img {
                opacity: 1;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("div.tab ul li").click(function() {
                    $("div.tab ul li").removeClass("current");
                    $(this).addClass("current");
                    $("img.show").attr("src", $(this).children("img").attr("src"));
                });
            });
        </script>
    </head>
    <body>
        <div class="tab">
            <ul>
                <li class="current"><img src="/img/explorer.jpg" alt="explorer"/></li>
                <li><img src="/img/firefox.png" alt="explorer"/></li>
                <li><img src="/img/chrome.jpg" alt="explorer"/></li>
                <li><img src="/img/navigator.png" alt="explorer"/></li>
            </ul>
            <img class="show" src="/img/explorer.jpg" alt="show"/>
        </div>
    </body>
</html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
Alex_70 Nascondere label tab se campo vuoto PHP 2
W [WordPress] [WooCommerce] Non trovo più la Tab Visulizzazione dei Prodotti in questo nuovo Plugin WordPress 2
ken_korn [Javascript][Risolto] browser.tab.Tabs.favIconUrl non funziona Javascript 5
S [HTML] Problema Sovrapponimento Tab con Contentuto HTML e CSS 0
G Samsung tab 4 - impostazione e cancellazione codice di accesso Smartphone e tablet 0
F Tab accordion tutti chiusi jQuery 1
filomeni Tab facebook Social Media Marketing 0
N Scorrimento automatico TAB Javascript 5
F Aprire un tab con js Javascript 0
F a name tab HTML e CSS 1
A Come faccio a testare app su dispositivo reale (galaxy tab 2) Sviluppo app per Android 1
Nik Articoli suddivisi in categorie dentro accordion tab WordPress 0
L Tab sovrapposta all'altra HTML e CSS 3
K spam, registrazione e tab attività WordPress 6
M Aggiungere una tab al VBulletin 4 CMS (Content Management System) 2
novello88 Codici segreti per Galaxy tab [Era: Secret codes] Smartphone e tablet 0
F laoyut nella pagina inserendo una "tab" HTML e CSS 2
P eliminare i tab PHP 1
SolidSnake4 menu a tab Javascript 2
Y Problema con Link interni ad una interfaccia Tab Javascript 3
G menu tab e css HTML e CSS 0
E [mysql] non funziona UPDATE tab SET etc. PHP 19
M Come si inserisce il Tab?! Javascript 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

Discussioni simili