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');
    })

})

有谁知道我怎么做到这一点？任何帮助将不胜感激！

Answer 1

试试这个

将类标签链接分配给'a'

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

Jquery的

  $(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');
  });


})

Jsfiddle http://jsfiddle.net/9gjtw/

标签内容：从“标签1”中的链接打开“标签5”

1 个答案: