您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS

jQuery Tab标签自动切换

jquery   tab  
简介

jQuery Tab标签自动切换代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery Tab标签自动切换</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tab_zd.js"></script>
</head>
<body>
<div class="tab">
<ul id="list_mark">
<li>第一页</li>
<li>第二页</li>
<li>第三页</li>
</ul>
<div class="tab_con">
<div class="list1">第一页内容</div>
<div class="list1">第二页内容</div>
<div class="list1">第三页内容</div>
</div>
</div>
</body>
</html>




默认自动切换,同时鼠标划过或鼠标点击也可以切换,只需将tab_zd.js里

$('#list_mark li').hover(

改为

$('#list_mark li').click(

就可以了。

在线预览:jQuery Tab标签自动切换

点击下载:tabzdqh.zip

Top