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

jQuery Tab标签自动切换

  • Lee D
  • JS
  • 2019-08-12
  • 3623已阅读
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

上一篇：层叠卡片幻灯片切换效果

下一篇：jQuery手机移动端图片触屏滑动焦点图网页特效

相关文章

特别推荐

  • 层叠卡片幻灯片切换效果 阅读

  • css光泽一闪而过的效果 阅读

  • 幻灯片效果 阅读

推荐文章

点击排行

标签云

友情链接

Top