切换布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换练习</title>
<link rel="stylesheet" href="css/demo.css">
<script src="js/jquery.min.js"></script>
<script src="js/demo.js"></script>
</head>
<body>
<ul id="tab">
<li class="tabon">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="content current-tab">
标签1内容
</div>
<div class="content">
标签2内容
</div>
<div class="content">
标签3内容
</div>
</body>
</html>
body{font-size: 14px;}
ul,li{padding:0;margin: 0;list-style: none;}
ul{overflow: hidden;}
li{float: left;background: #ccc;margin-right: 10px;padding:5px;cursor: pointer;}
.tabon{background:#666;color:#fff;}
.content{background: #666;width: 300px;height: 100px;padding: 5px;display:none;}
.current-tab{display: block;}
切换的实现：
var timeoutid;
$(document).ready(function() {
$("#tab li").each(function(index) {
var liNode = $(this);
$(this).mouseover(function() {
timeoutid = setTimeout(function() {
$("div.current-tab").removeClass("current-tab");
$(".content").eq(index).addClass("current-tab");
$("#tab li.tabon").removeClass("tabon");
liNode.addClass("tabon");
}, 300);
}).mouseout(function() {
clearTimeout(timeoutid);
})
})
});
时间： 2024-11-11 03:05:20