本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考，具体如下：
CSS代码：
rush:css;">
#tabs{
width:600px;
height:250px;
background:white;
margin:20px;
}
#tabs ul{
float:left;
margin:20px 0 0 20px;
padding:0;
}
#tabs li{
width:80px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
border-bottom:1px solid grey;
border-top-left-radius:5px;
border-top-right-radius:5px;
background:#eeeeee;
position:relative;
top:1px;
}
#tabs li:hover{
color:#aaaaaa;
cursor:pointer;
}
.items{
width:560px;
height:175px;
font-size:16px;
text-align:center;
border:1px solid grey;
float:left;
margin-left:20px;
}
jQuery代码：
rush:js;">
$(document).ready(function(){
$("li").bind("click",function(){
$(".items").hide();
$("#"+$(this).attr("name")).show();
$("li").css({
"border-top":"1px solid white","border-left":"1px solid white","border-right":"1px solid white","border-bottom":"1px solid grey","background":"#eeeeee"
});
$(this).css({
"border-top":"1px solid grey","border-left":"1px solid grey","border-right":"1px solid grey","border-bottom":"1px solid white","background":"white"
});
});
$("li:first-child").click();
});
HTML部分代码：
rush:xhtml;">
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
