jquery - タブ付きコンテンツ: 「タブ 1」のリンクから「タブ 5」を開く

Question

jQuery を使用して、サイトにいくつかのタブ付きコンテンツがあります。jQueryに関しては初心者で、問題を解決できません。

tab-1 のコンテンツ div にリンクがあり、それをクリックすると、tab-5 にジャンプします。

私はいくつかのことを試みましたが、私の知識は非常に限られており、その方法がわからないのでうまくいきます。

私のHTML：

    <div class="tabbox">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Overview</li>
        <li class="tab-link" data-tab="tab-2">Features</li>
        <li class="tab-link" data-tab="tab-3">Images</li>
        <li class="tab-link" data-tab="tab-4">Compare</li>
        <li class="tab-link" data-tab="tab-5">Order</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        <a>click to open tab 5</a>
        </div>
    <div id="tab-2" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-3" class="tab-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-4" class="tab-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
<div id="tab-5" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

私のCSS：

.tabbox{
            width: 100%;
            margin: 0 auto;
        }



        ul.tabs{
            margin: 0 0 -1px 0;
            padding: 0px;
            list-style: none;
        }
        ul.tabs li{
            background: #fff;
            color: #ff3399;
            display: inline-block;
            padding: 10px 15px;
            cursor: pointer;
        }

        ul.tabs li.current{
            background: #fff;
            border-top: 1px solid #999999;
            border-right: 1px solid #999999;
            border-left: 1px solid #999999;
            border-bottom: 1px solid #fff;
            color: #ff3399;
        }

        .tab-content{
            display: none;
            background: #fff;
            border: 1px solid #999999;
            padding: 15px;
        }

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

私のJS：

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

誰も私がこれを行う方法を知っていますか? どんな助けでも大歓迎です！