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>