Tab in jquery: aggiungere classe allo stato inattivo

Nik

Utente Attivo
15 Set 2004
92
1
8
30
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>