jQuery切换标签内容

Question

我有些标签应该显示不同的内容，具体取决于单击的内容。问题很简单..是它们没有按预期工作。我花了很多时间进行搜索和查找，但是找不到解决方案。我想可能是因为它们位于不同的容器中，但是我不确定。

这里是一个小提琴：http://jsfiddle.net/f7sm63t2/

标记：

<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>

和我的jQuery代码：

$(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

使用ul#tabs就是使用ul.tabs。

您有<ul id="tabs">个没有<ul class="tabs">

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

})

#container {
    width:500px;
    height: 60px;
    overflow: hidden;
}
#container-content {
    width:150px;
    overflow: hidden;
}
#tabs {
    height:90px; /* 40px - more place for scrollbar, is hidden under parent box */
    padding:0px;
    white-space:nowrap;
    overflow-x: scroll;
    overflow-y: hide;
	-webkit-overflow-scrolling:touch;
}
.module {
    display:inline-block;
    width:;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#ddd;
}
.module + .module {
    margin-left:0px
}
.tab-content{
			display: none;
			background: #ededed;
			padding: 15px;
}
.tab-content.current{
			display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>