tabs with content HASH JQuery

tabs with content HASH JQuery ~ andrew pougher

HTML

<div class="container">
  <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
          <li><a href="#tab3">Tab 3</a></li>
          <li><a href="#tab4">Tab 4 with stuff</a></li>
  </ul>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      <h2>Content</h2>
    </div>
    <div id="tab2" class="tab_content">
      <h2>Content 2</h2>
    </div>
    <div id="tab3" class="tab_content">
      <h2>Content 3</h2>
    </div>
    <div id="tab4" class="tab_content">
      <h2>Content 4</h2>
    </div>
  </div>
</div>

CSS

.container{width:99%;margin:20px auto}
.tabs{margin:20px;}
.tab_content{background:#fe7efc;padding:20px;}

.tabs {
		    text-align: center;
		    list-style: none;
		    margin: 200px 0 20px;
		    padding: 0;
		    line-height: 24px;
		    height: 26px;
		    overflow: hidden;
		    font-size: 12px;
		    font-family: verdana;
		    position: relative;
		}
		.tabs li {
		    border: 1px solid inherit;
		    background: #D1D1D1;
		    background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    display: inline-block;
		    position: relative;
		    z-index: 0;
		    border-top-left-radius: 6px;
		    border-top-right-radius: 6px;
		    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
		    text-shadow: 0 1px #FFF;
		    margin: 0 -5px;
		    padding: 0 20px;
		}
		.tabs a {
			  color: #555;
			  text-decoration: none;
		}
		.tabs li.selected {
		    background: #FFF;
		    color: #333;
		    z-index: 2;
		    border-bottom-color: #FFF;
		}
		.tabs:before {
		    position: absolute;
		    content: " ";
		    width: 100%;
		    bottom: 0;
		    left: 0;
		    border-bottom: 1px solid red;
		    z-index: 1;
		}
		.tabs li:before,
		.tabs li:after {
		    border: 1px solid #AAA;
		    position: absolute;
		    bottom: -1px;
		    width: 5px;
		    height: 5px;
		    content: " ";
		}
		.tabs li:before {
		    left: -6px;
		    border-bottom-right-radius: 6px;
		    border-width: 0 1px 1px 0;
		    box-shadow: 2px 2px 0 #D1D1D1;
		}
		.tabs li:after {
		    right: -6px;
		    border-bottom-left-radius: 6px;
		    border-width: 0 0 1px 1px;
		    box-shadow: -2px 2px 0 #D1D1D1;
		}
		.tabs li.selected:before {
		    box-shadow: 2px 2px 0 #FFF;
		}
		.tabs...

JavaScript

$(function() {
    var tabContent = $(".tab_content");
    var tabs = $(".tabs li");
    var hash = window.location.hash;
    tabContent.not(hash).hide();
    tabs.find('[href=' + hash + ']').addClass('selected');

    tabs.click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        tabContent.hide();
        var activeTab = $(this).find("a").attr("href");

        $(activeTab).fadeIn();
        return false;
    });
});