Acutally there is nothing special, you have only three tabs ( list, grid, full ). First, i recommend to you to follow the mark-up below :
<ul class="tabs js-view-mode">
<li><a href="#list">List</a></li>
<li><a href="#grid">Grid</a></li>
<li><a href="#full">Full</a></li>
</ul>
<section id="viewMode">
<div id="list">here is list mode content</div>
<div id="grid">here is grid mode content</div>
<div id="full">here is full mode content</div>
</section>
As you can see, on tabs, inside <a href="">
class i put the id's for what we want to show. This is safe and easy because the script will not confuse what he has to show.
Also in html you must load jquery library and jquery-cookie ( you can avoid loading this plugin following the documentation for javascript-cookies ). Better load them before </body>
tag to get a faster loading time for page.
The jQuery code for what you want looks like :
$(document).ready(function(){
var wrap = $('#viewMode'),
viewMode = $.cookie( 'view-mode' );
wrap.children().hide();
$('.js-view-mode').on( 'click', 'a',function( e ){
e.preventDefault();
var t = $(this),
type = t.attr('href');
$(type).fadeIn()
.siblings().fadeOut();
viewMode = $.cookie( 'view-mode', type );
});
if ( viewMode ) {
$('.js-view-mode a[href='+ viewMode +']').trigger('click');
} else {
$('.js-view-mode li:first a').trigger( 'click' );
}
});
You can see a live test here
Edit : JS Fiddle v2 ( add active clas + delay fadeIn/Out + return on clicking active item )