<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tab标签页切换</title>
<link rel="stylesheet" href="tab.css" />
<script src="jquery-2.1.4.min.js"></script> <!--注意你此处引入jquery的地址-->
<script src="tab.js"></script>
</head>
<body>
<div class='tabtitle'>
<ul>
<li class='current'>电脑</li>
<li>手机</li>
<li>电冰箱</li>
</ul>
</div>
<div class='tabcontent'>
<div class='hide' style='display:block'>这是电脑</div>
<div class='hide'>这是手机</div>
<div class='hide'>这是电冰箱</div>
</div>
</body>
</html>
tab.css
*{
margin: 0px;
}
li{
list-style-type: none;
}
.tabtitle ul li{
float: left;
border:1px solid red;
width: 60px;
height: 35px;
line-height: 35px;
text-align: center;
cursor:pointer;
}
.tabcontent div{
border:1px solid blue;
width: 182px;
height: 105px;
text-align: center;
line-height: 105px;
}
.tabcontent{
clear:both;
margin-left: 40px;
}
.current{
background: red;
color: black;
}
.hide{
display: none;
}
tab.js
$(function(){
//获取所有li
var li = $('.tabtitle ul li');
//获取所有div
var div = $('.tabcontent div');
li.mouseover(function(){
//获取当前对象
var _this = $(this);
time = setTimeout(function(){
//获取当前对象索引值
var num = _this.index();
_this.addClass('current').siblings().removeClass('current');
div.eq(num).show().siblings().hide();
},300);
}).mouseout(function(){
clearTimeout(time);
})
});