1

我的网站上有一些使用 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');
    })

})

有谁知道我该怎么做？任何帮助将非常感激！

4

1 回答 1

2

尝试这个

将类选项卡链接分配给“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/

于 2013-10-16T12:30:33.847 回答