您的位置：首页 > Web前端 > JQuery

jQuery-Tab切换

2015-10-12 17:08 483 查看

切换布局：

<!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);
})
})
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航