<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>标签切换</title>
<meta name="author" content="标题" />
<script src="jquery-1.8.0.min.js"></script>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
list-style: none;//去除样式
}
li{
float: left;
margin-right: 5px;
border: 1px solid #dd22df;
background-color: #6e6e6e;
padding: 5px;
color: red;
}
.contents{
clear: both;
width: 300px;
height: 100px;
display: none;
padding: 10px;
background-color: #6e6e6e;
}
.content{
background-color: #8e8e8e;
display: block;
}
.tabin{
background-color: #8e8e8e;
border: 1px solid #8e8e8e;
}
</style>
</head>
<body>
<ul id="tabfirst">
<li class="tabin">首页</li>
<li>新闻</li>
<li>体育</li>
</ul>
<div class="content contents">
内容1
</div>
<div class="contents">
内容2
</div>
<div class="contents">
内容3
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#tabfirst li").each(function(index){
var liNode=$(this);//
$(this).mouseover(function(){
var timeid= setTimeout(function() {//设置计时器，防止无意快速划过时，快速跳转
$("div.content").removeClass("content");//移除样式
$("#tabfirst li.tabin").removeClass("tabin");
$("div").eq(index).addClass("content");
liNode.addClass("tabin");
}, 800);
}).mouseout(function(){
clearTimeout(timeid);//清除计时器
})
});
});
</script>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>标签切换</title>
<meta name="author" content="标题" />
<script src="jquery-1.8.0.min.js"></script>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
list-style: none;//去除样式
}
li{
float: left;
margin-right: 5px;
border: 1px solid #dd22df;
background-color: #6e6e6e;
padding: 5px;
color: red;
}
.contents{
clear: both;
width: 300px;
height: 100px;
display: none;
padding: 10px;
background-color: #6e6e6e;
}
.content{
background-color: #8e8e8e;
display: block;
}
.tabin{
background-color: #8e8e8e;
border: 1px solid #8e8e8e;
}
</style>
</head>
<body>
<ul id="tabfirst">
<li class="tabin">首页</li>
<li>新闻</li>
<li>体育</li>
</ul>
<div class="content contents">
内容1
</div>
<div class="contents">
内容2
</div>
<div class="contents">
内容3
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#tabfirst li").each(function(index){
var liNode=$(this);//
$(this).mouseover(function(){
var timeid= setTimeout(function() {//设置计时器，防止无意快速划过时，快速跳转
$("div.content").removeClass("content");//移除样式
$("#tabfirst li.tabin").removeClass("tabin");
$("div").eq(index).addClass("content");
liNode.addClass("tabin");
}, 800);
}).mouseout(function(){
clearTimeout(timeid);//清除计时器
})
});
});
</script>
</html>
