tabs.css

.tabWrap {
	height: 400px;  //This wrap is not needed unless you have things you are putting under this tab box.
}

.tabs {
	display: block;  //Float tabs left and give the whole thing a specific height.
	float: left;
	height: 22px;
}

.tabs li {
	list-style: none;    //No list style, a little bit of padding, a pointer for the li, and again floating it.
	padding: 9px 7px 5px 7px;
	cursor: pointer;
        float: left;
}

.tabs li a {
	font-size: 1.17em;
	font-style: normal;
}

html ul.tabs li.active a{
	font-weight: bold;
}

.tabContainer {
	overflow: hidden;  //Overflow should always be set to hidden.  Floating left and width fills container.
	float: left;
	width: 100%;
}

.arrow {
	position: absolute;
	border-style: solid;
	border-color: #212121 transparent transparent transparent;  //This gives the div its arrow shape.
	margin-top: -9px;	//Puts the arrow above the li.
	border-width: 4px;
	height: 0;
	width: 0;
}

tabs.html

<ul class="tabs">
    	<li><a href="#tab1">Tab name 1</a></li>
    	<li><a href="#tab2">Tab name 2</a></li>
</ul><!-- .tabs -->

<div class="tabWrap">
	<div class="tabContainer">
    		<div id="tab1" class="tabContent">
    		     Tab content goes here.
        	</div><!-- .tabContent -->
   		<div id="tab2" class="tabContent">
       		     Tab Content goes here.
                </div><!-- .tabContent -->
	</div><!-- .tabContainer -->
</div><!-- .tabWrap -->

tabs.js

$(document).ready(function(){

$(".tabContent").hide();  //Hides all tab content divs.
$(".tabs li:eq(0)").addClass("active").show();  //Adds the active class to the first tab li.
$(".tabContent:eq(0)").show();   //Shows the first tab content div.

$(".tabs li")
        .prepend("<div class='arrow'></div>")  //Prepends the arrow to the li in the tab menu.

	.each(function(){
		var hpos = $(this).width() / 2.2;  //Gets the center (somewhat) of the li.
		$(".arrow", this).css("margin-left", hpos);   //Moves the arrow to the center of the li.
	})

	.hover(function(){
		$("li:not(.active) .arrow").stop(true, true).fadeOut();  //Fades out any arrows not hovered on excluding the active tab arrow.
		$(".arrow", this).stop(true, true).fadeIn();    //Fades in the arrow for this li.
	},
	function(){
		$("li:not(.active) .arrow").stop(true, true).fadeOut();  //On hover out fades the arrow for this li. (1st line of defense)
	})

        .click(function(event) {
		event.preventDefault();   //Takes the event of a normal click away.
		$(this).stop()
		.animate({marginTop: "2px"}, 100)   //Animating li like a button.
		.animate({marginTop: "0px"}, 100, 
		function(){
			$(".tabs li").removeClass("active");   //Removing active class from the current li and setting it to the clicked li
			$(this).addClass("active");
			$(".tabContainer").slideUp(400);       //Sliding up the container and the content at the same time.
			$(".tabContent").slideUp(400);
			$("li:not(.active) .arrow").stop(true, true).fadeOut();    //Fading out the arrow that was previously active.

			var activeTab = $("a", this).attr("href");    //Finding out which content to slide down now and doing so.
			$(".tabContainer").delay(2).slideDown(1, function(){   //This is setup this way for a smooth transition between tabs.
				$(activeTab).slideDown(400);
			});
			$(".tabs li.active .arrow").fadeIn();  //Fade in the newly appointed active arrow.
			return false;  //Just for extra mesures.
		});
	});


$(".tabs li:not(.active) .arrow").hide();  //Hides all arrows except the active tab arrow on page load.

});