Jquery 选项卡式内容:打开';表5&x27;从';表1&x27;

Jquery 选项卡式内容:打开';表5&x27;从';表1&x27;,jquery,css,tabs,Jquery,Css,Tabs,我在使用jQuery的网站上有一些选项卡式内容。我是jQuery的新手,我无法解决我的问题 我在content div中有一个tab-1的链接,当点击它时,我想跳转到tab-5 我试过做一些事情,但我的知识是如此有限,我不知道如何做到这一点,所以它的工作 我的HTML: <div class="tabbox"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-

我在使用jQuery的网站上有一些选项卡式内容。我是jQuery的新手,我无法解决我的问题

我在content div中有一个tab-1的链接,当点击它时,我想跳转到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>
我的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');
    })

})
有人知道我怎么做吗?任何帮助都将不胜感激

试试这个

将类选项卡链接分配给“a”

<a class="tab-link" data-tab="tab-5">click to open tab 5</a>

你赢了我15秒!我就是这么做的。
<a class="tab-link" data-tab="tab-5">click to open tab 5</a>
  $(document).ready(function(){

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

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

    $("li.tab-link[data-tab='"+ tab_id+"']").addClass('current');
    $("#"+tab_id).addClass('current');
  });


})