Menù

Demo

Contenuto tab 1
Contenuto tab 2
Contenuto tab 3
  • aggiornato il 07/03/2025 14:18:42

Top 5

Menù tabs

Menù stile widget Tabs di Jquery

<div id="tabs-demo">
    <ul class="tabs-menu">
        <li><a href="#tab1">TAB 1 </a></li>
        <li><a href="#tab2">TAB 2</a></li>
        <li><a href="#tab3">TAB 3</a></li>
    </ul>
    <div class="tabs-content">
        <div class="tab" id="tab1">
            Contenuto tab 1
        </div>
        <div class="tab" id="tab2">Contenuto tab 2</div>
        <div class="tab" id="tab3">Contenuto tab 3</div>
    </div>
</div>

Personalizzazione css

<style>
    div#tabs-demo {
        height: auto;
        border: 1px solid #ddd;
        float:left;
        width: 100%;
        padding:3px;
        border-radius: 3px;
    }
    div#tabs-demo ul.tabs-menu {
        list-style-type: none;
        margin:0;
        padding:0;
        float:left;
        width: 100%;
        background-color: #E9E9E9;
    }
    div#tabs-demo ul.tabs-menu li {
        padding: 6px 12px ;
        background-color: #fff;
        float:left;
        margin: 0 2px 0 0;
        position: relative;
        background-color: #F6F6F6;
        border: 1px solid #ddd;
        cursor:pointer;
    }
    div#tabs-demo ul.tabs-menu li.active {
        background-color: #FFF;
        border-bottom: 1px solid #FFF;
    }
    div#tabs-demo div.tabs-content {
        float:left;
        width: 100%;
        border: 1px solid #ddd;
        border-top: none;
    }
    div#tabs-demo div.tab {
        display: none;
        clear: both;
        padding:12px;
    }
    div#tabs-demo div.tab.active {
        display: block;
    }
    div#tabs-demo div.tabs-content {
        float:left;
        width: 100%;
    }
</style>

funzioni Javascript

<script>
    $(document).ready(function () {
        let index = localStorage.indexTab ? localStorage.indexTab : 0;
        $("ul.tabs-menu li").each(function () {
            $($(this).children("a").attr('href')).hide();
            $(this).removeClass("active");
            if ($(this).index() == index) {
                $(this).addClass("active");
                $($(this).children("a").attr('href')).show();

            }
        });
        $("ul.tabs-menu li").click(function (e) {
            e.preventDefault();
            localStorage.indexTab = $(this).index();
            $("ul.tabs-menu li").removeClass("active");
            $(this).addClass("active");
            // meglio ciclare gli id e hiddare per id
            $(".tabs-content div.tab").hide();
            $($(this).children("a").attr('href')).show();
        });
    });
</script>
  • 28/01/2025 13:55
  • Zip

criric

Mi sono appassionato di programmazione web a 34 anni, un pò tardi, da allora però non perdo mai occasione per imparare qualcosa di nuovo in questi campi.

Javascript - Html - Css - Php - Mysql

Inserisci un commento

Codice antispam

Categorie

Comunicazioni

Puoi utilizzare questo modulo per qualsiati tipo di segnalazione.

Codice antispam

 

I dati di questo modulo non verranno pubblicati.