<style type="text/css"><!--body{ padding:0font:12px "宋体" }/*选项卡1*/#lib_Tab1{width:500pxmargin:0pxpadding:0pxmargin-bottom:15px}/*选项卡2*/#lib_Tab2{width:576pxmargin:0pxpadding:0pxmargin-bottom:15px}/*菜单class*/.lib_tabborder{border:1px solid #95C9E1}.lib_Menubox {height:28pxline-height:28pxposition:relative}.lib_Menubox ul{margin:0pxpadding:0pxlist-style:noneposition:absolutetop:3pxleft:0margin-left:10pxheight:25pxtext-align:center}.lib_Menubox li{float:leftdisplay:blockcursor:pointerwidth:114pxcolor:#949694font-weight:boldmargin-right:2pxheight:25pxline-height:25pxbackground-color:#E4F2FD}.lib_Menubox li.hover{padding:0pxbackground:#fffwidth:116pxborder-left:1px solid #95C9E1border-top:1px solid #95C9E1border-right:1px solid #95C9E1color:#739242height:25pxline-height:25px}.lib_Contentbox{clear:bothmargin-top:0pxborder-top:noneheight:181pxtext-align:centerpadding-top:8px}--></style><script><!--function setTab(name,cursel,n){ for(i=1i<=ni++){ var menu=document.getElementById(name+i) var con=document.getElementById("con_"+name+"_"+i) menu.className=i==cursel?"hover":"" con.style.display=i==cursel?"block":"none"}}//--></script></head><body><div id="lib_Tab1"><div class="lib_Menubox lib_tabborder"><ul> <li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li> <li id="one2" onclick="setTab('one',2,4)" >新闻2</li> <li id="one3" onclick="setTab('one',3,4)">新闻3</li> <li id="one4" onclick="setTab('one',4,4)">新闻4</li></ul></div><div class="lib_Contentbox lib_tabborder"><div id="con_one_1" >新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div></div><div id="lib_Tab2"><div class="lib_Menubox lib_tabborder"><ul> <li id="two1" onclick="setTab('two',1,4)" >新闻1</li> <li id="two2" onclick="setTab('two',2,4)"class="hover" >新闻2</li> <li id="two3" onclick="setTab('two',3,4)">新闻3</li> <li id="two4" onclick="setTab('two',4,4)">新闻4</li></ul></div><div class="lib_Contentbox lib_tabborder"><div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div></div><bR /><div id="lib_Tab3"><div class="lib_Menubox lib_tabborder"><ul> <li id="tab1" onclick="setTab('tab',1,4)" >新闻1</li> <li id="tab2" onclick="setTab('tab',2,4)"class="hover" >新闻2</li> <li id="tab3" onclick="setTab('tab',3,4)">新闻3</li> <li id="tab4" onclick="setTab('tab',4,4)">新闻4</li></ul></div>授之于鱼 不如.....呵呵 上面的给你了代码 我来给你说下思路吧。这里最重要的是 css里的 display:none 这个的使用，当鼠标点中一个选项卡时，将自身的css中的display:none去掉 让其显示出来，让其他的选项卡中的css中添加display:none， 隐藏其他的选项卡。其实就是这个简单 ，具体的实现方法就是用js实现的。实现的方法有多种，上面给你的只是其中的一种。你可以去网上多搜些这方面的源代码，多多学习，希望你能编写出属于自己的代码~纯CSS写的选项卡效果代码，没有使用js，供学习参考。现在很多都是使用jQuery的，动态效果非常好。站长之家、懒人之家有好多样例可供选择下载。
代码说明
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。
关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。
HTML代码
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
CSS代码
* {
margin: 0
padding: 0
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
}
body {
padding: 20px
text-align: left
font-family: Lato
color: #fff
background: #9b59b6
}
.tabs {
width: 650px
float: none
list-style: none
position: relative
margin: 80px 0 0 10px
text-align: left
}
.tabs li {
float: left
display: block
}
.tabs input[type="radio"] {
position: absolute
top: -9999px
left: -9999px
}
.tabs label {
display: block
padding: 14px 21px
border-radius: 2px 2px 0 0
font-size: 20px
font-weight: normal
text-transform: uppercase
background: #8e44ad
cursor: pointer
position: relative
top: 4px
-webkit-transition: all 0.2s ease-in-out
-moz-transition: all 0.2s ease-in-out
-o-transition: all 0.2s ease-in-out
transition: all 0.2s ease-in-out
}
.tabs label:hover {
background: #703688
}
.tabs .tab-content {
z-index: 2
display: none
overflow: hidden
width: 100%
font-size: 17px
line-height: 25px
padding: 25px
position: absolute
top: 53px
left: 0
background: #612e76
}
.tabs [id^="tab"]:checked + label {
top: 0
padding-top: 17px
background: #612e76
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block
}
