Tab in jquery: aggiungere classe allo stato inattivo

Nik · 29 Mag 2014

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 · 29 Mag 2014

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>

Cerca

Cerca

Tab in jquery: aggiungere classe allo stato inattivo

Nik

Utente Attivo

criric

Super Moderatore

Discussioni simili