4
I am developing a website in jQuery. And so far I have created a simple menu with content to appear within Divs.
Menu
<ul class="menu" id="menu">
<li class="menu-text"><h4>Titulo</h4></li>
<li class="current"><a href="#1" data-id="div1">Menu1</a></li>
<li><a href="#2" data-id="div2">Menu2</a></li>
<li><a href="#3" data-id="div3">Menu3</a></li>
</ul>
Content in Div’s
<div class="pbox" id="div1"> ... </div>
<div class="pbox" id="div2"> ... </div>
<div class="pbox" id="div3"> ... </div>
jQuery
$('#menu').on('click', 'a', function () {
if(!($(this).closest('li').hasClass("current"))){
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
// fade out all open subcontents
$('.pbox:visible').hide(600);
// fade in new selected subcontent
$('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
}
});
The only problem with using tabs (or tabs) is that when you refresh the page you automatically go back to the first tab, in this case the #1.
Is there any way, when refreshing, to stay in the same tab?
You can solve this by saving the value/item displayed in Localstorage in HTML5 itself.
– Bruno Heringer