jQuery simple tabs

tabs.css

/** jquery.tabs */
ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.tabs li {
	background: none;
	color: #444;
	display: inline-block;
	padding: 15px 15px;
	cursor: pointer;
	font-weight: bold;
	margin:0;
}

ul.tabs li.current {
	color: #fff;
	background: #F79B40;
	-webkit-border-top-left-radius: 2px;
        -webkit-border-top-right-radius: 2px;
        -moz-border-radius-topleft: 2px;
        -moz-border-radius-topright: 2px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
}

.tab-content.hidden {
	display:none;
}

.tab-content {
	background: #ededed;
	padding: 15px;
	border-top:1px solid #F79B40;
}

.tab-content.current {
	display: inherit;
}

tabs.html

<div id="tabs">
<ul class="tabs">
	<li class="tab-link current" data-tab="tab1">tab 1</li>
	<li class="tab-link" data-tab="tab2">tab 2</li>
	<li class="tab-link" data-tab="tab3">tab 3</li>
</ul>

<div id="tab1" class="tab-content current">
// plop
</div>

<div id="tab2" class="tab-content">
// plop
</div>

<div id="tab3" class="tab-content ">
// plop
</div>

</div>

tabs.js

jQuery(document).ready(function(){
	
	jQuery('ul.tabs li').click(function(){
		var tab_id = jQuery(this).attr('data-tab');
		
		jQuery('ul.tabs li').removeClass('current');
		jQuery('.tab-content').removeClass('current').addClass('hidden');

		jQuery(this).addClass('current');
		jQuery("#"+tab_id).removeClass('hidden').addClass('current');
	});
	jQuery('.tab-content').not('.current').addClass('hidden');
	
	// set given tab if passed in URL
	if(window.location.hash) {
		current = window.location.hash;
		if ( jQuery('ul.tabs li.tab-link[data-tab="' + current.replace('#', '') + '"]').length ) { // only if element exists
			jQuery('ul.tabs li.tab-link').removeClass('current');
			jQuery('ul.tabs li.tab-link[data-tab="' + current.replace('#', '') + '"]').addClass('current');
			jQuery('div.tab-content').removeClass('current');
			jQuery('div' + current).addClass('current');
		}
	}	

})