Stylish Trapezoidal Tabs

HTML

<div style="background-color:#e6e6e6">
<ul id="tabs">
    <li><a href="#" name="#tab1">One</a>
    </li>
    <li><a href="#" name="#tab2">Two</a>
    </li>
    <li><a href="#" name="#tab3">Three</a>
    </li>
    <li><a href="#" name="#tab4">Four</a>
    </li>
</ul>
</div>
<div id="content">
    <div id="tab1">
         <h2>Lorem ipsum sit amet 1</h2>

    </div>
    <div id="tab2">
         <h2>Lorem ipsum sit amet 2</h2>

    </div>
    <div id="tab3">
         <h2>Lorem ipsum sit amet 3</h2>

    </div>
    <div id="tab4">
         <h2>Lorem ipsum sit amet 4</h2>

    </div>
</div>

CSS

body {
    width: 700px;
    margin: 100px auto 0 auto;
    font-family: Arial, Helvetica;
    font-size: small;
    background-color: #eee;
}
/* ------------------------------------------------- */
 #tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#tabs li {
    float: left;
}
#tabs a {
    float: left;
    position: justified;
    padding: 0 50px;
    height: 0;
    line-height: 30px;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-bottom-color: white;
}
#tabs a:hover, #tabs a:focus {
    border-bottom-color: #2ac7e1;
    opacity: 1;
    filter: alpha(opacity=100);
}
#tabs a:focus {
    outline: 0;
}
#tabs #current {
    z-index: 3;
    border-bottom-color: #3d3d3d;
    opacity: 1;
    filter: alpha(opacity=100);
}
/* ----------- */
 #content {
    background: #fff;
    border-top: 2px solid #3d3d3d;
    padding: 2em;
    /*height: 220px;*/
}
#content h2, #content h3, #content p {
    margin: 0 0 15px 0;
}
/* Demo page only */
 #about {
    color: #999;
    text-align: center;
    font: 0.9em Arial, Helvetica;
}
#about a {
    color: #777;
}

JavaScript

function resetTabs() {
    $("#content div").hide(); //Hide all content
    $("#tabs a").attr("id", ""); //Reset id's
}

var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For mywebsite.com/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab

(function () {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first a").attr("id", "current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $("#tabs a").on("click", function (e) {
        e.preventDefault();
        if ($(this).attr("id") == "current") { //detection for current tab
            return
        } else {
            resetTabs();
            $(this).attr("id", "current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });

    for (i = 1; i <= $("#tabs li").length; i++) {
        if (myUrlTab == myUrlTabName + i) {
            resetTabs();
            $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
            $(myUrlTab).fadeIn(); // Show url tab content
        }
    }
})()