jQuery Tab Menü

HTML
----
    <div class="tab-dis">
        <div class="tab-link">
            <a href="#">Tab 1</a>
            <a href="#">Tab 2</a>
            <a href="#">Tab 3</a>
        </div>


        <div class="tab-content">
            <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime mollitia, deserunt necessitatibus voluptate iure praesentium voluptatum beatae, nihil et! Facere ea alias odit ut ex aliquid! Itaque ullam, officia sed.</p>   
            <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime mollitia, deserunt necessitatibus voluptate iure praesentium voluptatum beatae, nihil et! Facere ea alias odit ut ex aliquid! Itaque ullam, officia sed.</p>
            <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime mollitia, deserunt necessitatibus voluptate iure praesentium voluptatum beatae, nihil et! Facere ea alias odit ut ex aliquid! Itaque ullam, officia sed.</p>
        </div>
    </div>   

JS
---
$(document).ready(function() {


    $(".tab-content p:eq(0)").show();


    $(".tab-link a").click(function() {

        var hangiLink = $(this).index();

        $(this).addClass('secili');
        $(".tab-link a").not(this).removeClass('secili');

        $(".tab-content p").hide(200);
        $(".tab-content p").eq(hangiLink).stop().fadeIn(300);

    });


});
CSS
----
*{
    margin: 0;
    padding: 0;
}
.tab-dis{
    width: 800px;
    margin: 50px auto;
    border: 1px solid;
}
.tab-link{
    border-bottom: 1px solid magenta;
    background: lightblue;
    margin: 0;
}
.tab-link a{
    height: 60px;
    width: 120px;
    color: blue;
    text-decoration: none;
    line-height: 59px;
    background: magenta;
    display: inline-block;
    text-align: center;
}
.tab-content{
    padding: 10px;
}
.tab-content p{
    display: none;
}
.secili{
    background: blue!important;
    color:magenta!important;
}