时间戳

首页 > 解决方案 > jQuery切换标签内容

jquery - jQuery切换标签内容

问题描述

我有一些标签应该根据点击的内容显示不同的内容。问题，很简单..是他们没有按预期工作。我花了很长时间搜索和查找这个，但找不到解决方案。我想这可能是因为它们在不同的容器中，但我不确定。

这是一个小提琴：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');
    })

})

如果有人能给我提示问题出在哪里，将不胜感激。

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

标签： jquery

解决方案

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

推荐阅读