先看一下代码实现后的最终效果：
用JavaScript实现思路很简单，就是先把所有的内容隐藏，点击标题对应的内容显示，
css代码如下：
<style type="text/css">
#ltab {
clear: both;
/*清除全部浮动样式*/
}
#ltab_1 {
display: none;
}
#ltab_2 {
display: none;
}
#ltab_3 {
display: none;
}
</style>
html内容区域：
<body>
/标题区域/
<div class="home__tab___4BeRq">
<ul>
<li ></span>
</li>
</ul>
</div>
/内容区域/
<div >
<div >
具体内容太繁琐，以简单文字代替
</div>
<div >
具体内容太繁琐，以简单文字代替
</div>
<div >
具体内容太繁琐，以简单文字代替
</div>
<div >
具体内容太繁琐，以简单文字代替
</div>
</div>
</body>
js代码如下：
function changeTab(ltab_num) {
for(i = 0; i <= 3; i++) {
document.getElementById("tabc_" + i).className="" //隐藏所有的标题样式
document.getElementById("ltab_" + i).style.display = "none"; //将所有的层都隐藏
}
document.getElementById("tabc_"+ltab_num).className="home__active___1gdd2";//令当前选中状态的标题的class=“home__active___1gdd2”
document.getElementById("ltab_" + ltab_num).style.display = "block"; //显示当前层
}
相关参考网址：
http://www.jb51.net/article/74395.htm