选项卡式内容是一种在不失去可用性的情况下处理页面上大量信息的好方法，它还提供了出色的用户体验。 这是使用jQuery和CSS创建选项卡式内容的真正简便方法。
步骤1：引用jQuery库
<script src=//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script>我使用了Google托管的jQuery库的作为示例，但是您可以下载脚本并将其托管在服务器上或是使用其它cdn的托管服务。
步骤2：编写一些HTML代码
<div >
<ul >
<li data-tab="tab-1">Tab One</li>
<li data-tab="tab-2">Tab Two</li>
<li data-tab="tab-3">Tab Three</li>
<li data-tab="tab-4">Tab Four</li>
</ul>
<div id="tab-1" >
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" >
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" >
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" >
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><!-- container -->在上面的代码中，我创建了一个无序列表，它将用作选项卡，并且使用了一个名为data-tab的自定义属性，并将其值设置为tab-1，tab-2等。 我们将在jQuery脚本中使用data-tab属性来切换“当前”类以隐藏和显示我们的标签。
在无序列表下方，有一些DIV元素，其ID属性与我们在无序列表中使用的data-tab属性相同。 这将做所有的js效果。 在添加js脚本之前，让我们编写一些CSS样式化我们的HTML Unordered列表和内容面板。
我在第一个元素中添加了“current”类，我们将使用当前类来样式化活动选项卡并切换数据内容div元素。
第3步：编写一些CSS样式的HTML
body{
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container{
width: 800px;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}我已经将display:none用于.tab内容，并将display:inherit用于“current”选项卡。 这将隐藏所有DIV元素，并仅显示当前类的选项卡。 我们将与当前类一起玩，以使用一个小的jQuery代码来使我们的选项卡式内容工作。您始终可以更改CSS，使其外观与您的网站相似，并使用一些图像背景使其美观流畅。
步骤4：编写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');
});
});当DOM准备就绪时，如果用户单击ul.tabs的任何列表元素，它将获取data-tab属性并将其分配给tab_id变量。 然后，我们将使用jQuery removeClass属性从所有列表元素和DIV.tab-content元素中删除当前类。 然后，我们将“当前”类添加到单击的列表元素和带有抓取的数据标签ID的DIV标签中。
就是这样，现在我们可以使用jQuery和CSS的选项卡式内容了。 尝试一下，分享一下，并在评论中让我知道您的想法。 如果您需要添加任何其他功能，请随时在评论中提问。
上面的废话太多了。如果您只看代码，完全可用在这里查看在线演示
本文已在Ie主题由99839发布
文章来源：https://ietheme.com/create-tabbed-content-with-jquery-css.html
