这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变, 这样的效果是 CSS 和 JS 配合实现的, 下面我们就来看看具体代码
实现的效果:
如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在 "标签 1" 上,则内容区域显示的内容为 "我是内容 1",并且 "标签 1" 的颜色要比 "标签 2" 和 "标签 3" 深一些,同样鼠标移到 "标签 2" 和 "标签 3" 的时候显示 "我是内容 2" 和 "我是内容 3"。这样的效果是 CSS 和 JS 配合实现的。下面我们就来看看具体代码:
首先来看 html 代码:
- <!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>
JS 代码实现思路很简单,首先给每个标签项注册一个 mouseover 函数,当鼠标移到任何一个标签上的时候都会执行 moveover 函数体内的代码。函数体代码首先获取当前节点,将原来显示的内容进行隐藏,然后根据传入的节点 index 把对应于相应标签下的内容显示出来。在代码中我们可以看到除了对 HTML 中节点样式进行改动外还使用了 setTimeout 函数,该函数的作用是延迟函数的执行时间,下面代码中的延迟时间为 300 毫秒,也就是当鼠标移到标签后并不是立即执行而是延迟 300 毫秒后在执行,如果在 300 毫秒时间内鼠标移出标签区域则不再执行该代码。
- $(document).ready(function(){
- var timeoutid;
- $("#tabfirst li").each(function(index){
- //每一个包装的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");
- },300);
- }).mouseout(function(){
- clearTimeout(timeoutid);
- });
- });
- });
除了该效果外,我们还可以利用相同的原理给每个标签注册 click 函数,当点击每个标签的时候在原内容区域可以装载不同的页面或任意页面的一部分,有兴趣的话可以点击这里下载源码。该源码中包含了文中所提到的两种不同函数所实现的不同功能。
来源: http://www.phperz.com/article/17/0707/280605.html