<html>
<head>
<title>tab</title>
<style type="text/css">
body
{
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
.scroll
{
border: 2px solid #ccc;
}
.tabdiv
{
width: 716px;
}
.tabHead
{
height: 35px;
}
ul.tabul
{
margin: 0px;
padding: 0px;
height: 35px;
}
ul.tabul li
{
list-style-type: none;
margin: 0px;
float: left;
}
ul.tabul li a, ul.tabul li a:visited
{
display: block;
text-decoration: none;
background: url('images/blue2.jpg') -424px 0px;//默认情况下的图片,根据自已的需要时行修改
background-repeat: no-repeat;
width: 130px;
height: 35px;
line-height: 35px;
text-align: center;
}
ul.tabul li a:hover
{
/*background:url('images/blue2.jpg') -424px -70px;*/
background-repeat: no-repeat;
}
.tabContent
{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
ul.tabul li a.selected
{
background: url('images/blue2.jpg') -424px -70px;//tab切换时的图片,根据自已的需要时行修改
background-repeat: no-repeat;
}
li.last
{
width: 456px;
height: 33px;
border-bottom: 1px solid #ccc;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>//借助了jquery
</head>
<body>
<div class="tabdiv">
<div class="tabHead">
<ul class="tabul">
<li><a href="#" class="selected">我的电脑</a></li><li><a href="#">我的新闻</a></li><li class="last"></li>
</ul>
</div>
<div class="tabContent">
我的电脑
</div>
<div class="tabContent">
我的新闻
</div>
</div>
<script language="javascript" type="text/javascript">
function bindEvent() {//tab切换
$("div.tabContent").each(function (i, n) { if (i == 0) return true; else { $(this).hide(); } });
$(".tabHead>ul>li>a").each(function (i, n) {
var numb = i;
$(this).bind("mouseover", function () {
$(".tabHead>ul>li>a").each(function () {
if ($(this).hasClass("selected")) {$(this).removeClass("selected"); $("div.tabContent").each(function (a, k) { if (a == numb) { $(this).show(); } else { $(this).hide(); } }); return false;}});
$(this).addClass("selected");
});
});
}
bindEvent();
</script>
</body>
</html>
background: url('images/blue2.jpg') -424px 0px;// blue2.jpg图片上传的附件中