jQuery切换选项卡内容

我有一些选项卡，它们应该根据单击的内容显示不同的内容。问题很简单，就是它们没有按预期工作。我花了相当长的时间搜索和查找，但找不到解决方案。我想可能是因为它们在不同的容器里，但我不确定

这是一把小提琴：

标记：

<div id="container">
    <ul id="tabs">
        <li class="module current" data-tab="tab-1">Tab One</li>
        <li class="module" data-tab="tab-2">Tab Two</li>
        <li class="module" data-tab="tab-3">Tab Three</li>
        <li class="module" data-tab="tab-4">Tab Four</li>
    </ul>
</div>
<div id="container-content">
    <div id="tab-1" class="tab-content current">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </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">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-4" class="tab-content">
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

如果有人能告诉我问题出在哪里，我将不胜感激

（注意：选项卡仅可移动，因此水平滚动应仅适用于移动设备）

使用

ul#tabs

您正在使用的

ul.tabs

您有

而没有

$（文档）.ready（函数（）{
$（'ul#tabs li'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'ul.tabs li'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（“#”+tab_id）.addClass（'current'）；
})
})

#容器{
宽度：500px；
高度：60px；
溢出：隐藏；
}
#容器内容{
宽度：150px；
溢出：隐藏；
}
#标签{
高度：90px；/*40px-滚动条的更多位置，隐藏在父框下*/
填充：0px；
空白：nowrap；
溢出-x：滚动；
溢出y：隐藏；
-webkit溢出滚动：触摸；
}
.模块{
显示：内联块；
宽度：；
高度：50px；
线高：50px；
文本对齐：居中；
背景：ddd；
}
.模块+.模块{
左边距：0px
}
.选项卡内容{
显示：无；
背景：#ededed；
填充：15px；
}
.tab-content.current{
显示：继承；
}

选项卡一
表二
表三
表四

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。
这是临时性的劳动和就业机会。但是，在最低限度上，我们需要一个实验室来进行日常工作。

哇！我知道一定是这样的。非常感谢你帮我节省了晚上的时间：）我会尽快接受答案。

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

})