<!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>标签页效果</title>
<link href=”../CSS/tab.css” rel=”stylesheet” type=”text/css” />
<script language=”JavaScript” type=”text/javascript”
src=”../JS文件/jquery.js”></script>
<script language=”JavaScript” type=”text/javascript”
src=”../JS文件/tab.js”></script>
</head>
<body>
<ul id=”tabfirst”>
<li class=”tabin”>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div id=”contentnow” class=”contentfirst
contentin”>笔者是内容1</div>
<div id=”contentnow” class=”contentfirst”>笔者是内容2</div>
<div id=”contentnow” class=”contentfirst”>作者是内容3</div>
</body>
</html>
落到实处的机能：
如上图所示为创设的标签页，大家想要完毕的效益是当鼠标移到某三个标签的时候，在底下的内容区展现相应的剧情，而且相应标签的水彩需求改换，如图中所示当前鼠标的地点在“标签1”上，则内容区域展现的源委为“小编是内容1”，况且“标签1”的颜色要比“标签2”和“标签3”深一些，同样鼠标移到“标签2”和“标签3”的时候显得“小编是内容2”和“小编是内容3”。那样的功能是CSS和JS合营达成的。上边大家就来拜候实际代码：
clearTimeout(timeoutid);
});
});
});
//每贰个打包的li的JQuery对象都会实施function中的代码
//index是近期实施这么些function代码的li对应在颇具li组成的数组中的索引值
//有了index的值后，就足以找到当前标签对应的内容区域
$(this).mouseover(function(){
var liNode = $(this);
timeoutid = setTimeout(function(){
//将本来展现的原委张开隐敝
$(“div.contentin”).removeClass(“contentin”);
//将原本有tabin属性的价签去掉tabin属性
$(“#tabfirst li.tabin”).removeClass(“tabin”);
//将近期标签对应的开始和结果区域展现出来
$(“div.contentfirst”).eq(index).addClass(“contentin”);
//$(“div.contentfirst:eq(” + index + “)”).addClass(“contentin”);
//将日前标签扩展tabin属性
liNode.addClass(“tabin”);
复制代码 代码如下:
除外该功用外，大家还足以选取同一的法则给种种标签注册click函数，当点击各个标签的时候在原内容区域能够装载差别的页面或自由页面包车型客车一有的，有意思味的话能够点击这里下载源码。该源码中带有了文中所涉及的三种区别函数所完成的两样效能。
}).mouseout(function(){
},300);
JS代码达成思路很简短，首先给各样标签项注册一个mouseover函数，当鼠标移到另外贰个标签上的时候都会推行moveover函数体内的代码。函数体代码首先取妥当前节点，将本来显示的剧情开始展览隐藏，然后依据传入的节点index把对应于相应标签下的内容展现出来。在代码中大家得以看来除了对HTML中节点样式举办转移外还利用了set提姆eout函数，该函数的功力是延迟函数的举办时间，上边代码中的延迟时间为300皮秒，也正是当鼠标移到标签后并非立时实行而是延迟300纳秒后在进行，假若在300飞秒时间内鼠标移出标签区域则不再实行该代码。
你也许感兴趣的稿子:
- js封装tab标签页实例分享
- js与jquery分别实现tab标签页功用的法子
- AngularJS完毕标签页的三种方法
- 最轻易易行纯JavaScript达成Tab标签页切换的不二秘籍(推荐)
- 纯css+js写的多个归纳的tab标签页带样式
- JS达成切换标签页效果实例代码
- 三个js随机颜色脚本（用于标签页面，也可用于别的页面）
- JS完成标签页切换效果
率先来看HTML代码：
复制代码 代码如下:
$(document).ready(function(){
var timeoutid;
$(“#tabfirst li”).each(function(index){