ajax标签导航实例详解 - 编程论坛

之前整理发表了《[url=http://www.]XMLHTTPRequest的属性和方法简介[/url]》,它是ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!

演示地址：[url=http://www.]http://www.[/url]

效果大家看到了，核心功能有：
１．将当前选中标签以特殊的样式显示
２．将异步加载的页面信息显示到指定的ＤＯＭ节点中

我们来看看处理脚本的代码吧：

ajaxtab.js

程序代码：

inde.htm

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxTab导航</title>
<link href="css/ajaxtab.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/ajaxtab.js"></script>
</head>
<body>
<div class="clearfix cotainer">
     <ul class="tabs" id="news">
         <li class="first" id="news-0"><a href="news/news0.htm">网站重构</a><span></span></li>
         <li id="news-1"><a href="news/news1.htm">CSS布局实录</a><span></span></li>
         <li id="news-2"><a href="news/news2.htm">海啸的地盘</a><span></span></li>
         <li id="news-3"><a href="news/news3.htm">Ajax高级编程</a><span></span></li>
       </ul><br class="clear" />
       <div class="clearfix cnt" id="newsCnt">
          <img src="img/girl-1.jpg" alt="林志琳" />
            <ul>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
            </ul>
     </div>
</div>
<div class="clearfix cotainer">
     <ul class="tabs" id="sports">
         <li class="first" id="sports-0"><a href="sports/sports0.htm">网站重构</a><span></span></li>
         <li id="sports-1"><a href="sports/sports1.htm">CSS布局实录</a><span></span></li>
         <li id="sports-2"><a href="sports/sports2.htm">海啸的地盘</a><span></span></li>
         <li id="sports-3"><a href="sports/sports3.htm">Ajax高级编程</a><span></span></li>
     </ul><br class="clear" />
     <div class="clearfix cnt" id="sportsCnt">
          <img src="img/girl-5.jpg" alt="林志琳" />
          <ul>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
          </ul>
     </div>
</div>
<script language="javascript" type="text/javascript">

</script>
</body>
</html>

ajaxtab.css

程序代码：

CSS技巧篇（position属性的运用技巧）

下面开始我们的分析了，先来看看这段XHTML代码：

程序代码：

<ul class="tabs" id="news">
         <li class="first" id="news-0"><a href="news/news0.htm">网站重构</a><span></span></li>
         <li id="news-1"><a href="news/news1.htm">CSS布局实录</a><span></span></li>
         <li id="news-2"><a href="news/news2.htm">海啸的地盘</a><span></span></li>
         <li id="news-3"><a href="news/news3.htm">Ajax高级编程</a><span></span></li>
</ul>
<div class="clearfix cnt" id="newsCnt">
          <img src="img/girl-1.jpg" alt="林志琳" />
            <ul>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
            </ul>
</div>

id="news"      - news就是我们的导航标签的ID；
id="newsCnt"   - newsCnt就是我们要写入信息的目标DOM节点；
class="first"  - first当前(第一个)标签的样式；
id="news-0"    - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签[li]在导航标签中的索引值）
<a href="news/news0.htm">网站重构</a> - 超链接
<span></span>                         - 标签间的分割线

我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。

程序代码：

/* 导航标签的样式 */
.tabs li{
   float:left;
   display:inline;
   text-align:center;
   width:120px;
   height:12px;
   padding:4px 0 6px 0;
   overflow:hidden;
   letter-spacing:1px;
   position:relative;
}

/* 标签分割线的样式 */
.tabs li span{
   position:absolute;
   right:0;
   top:3px;
   width:2px;
   height:16px;
   overflow:hidden;
   font-size:1px;
   background-image:url(../img/tab_sline.gif);
}

技巧就是.tab li中的”position:relative;“和.tabs li span中”position:absolute;“结合使用的技巧（呵呵，其实我也是看了YAHOO的标签后才这么用的）。现在我们就来了解下position属性吧（CSS讲座开始，不过是好东西哦，呵呵！）：

position：绝对定位，指本体对上级的定位（本人理解的说法），有3个可选值static（静态定位-默认值）、relative（绝对相对定位）、absolute（绝对定位）。

relative：他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合top、right、bottom、left进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。如下图一：

" border="0" />

absolute：他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。如下图二：

" border="0" />

不知道你看出些其他的什么特性出来了没有？我们仔细看下图二，你发现没有，在用absolute定位的时候，它可以覆盖在与其相邻的节点上（不是因为它设置了z-index属性），而是它的一个特性--不占布局或者说不影响邻居节点的布局。而relative则不一样，它会影响邻居节点的布局。我们通过图一还看不出来，来看图三：

" border="0" />

大家注意到图片中的灰色部分没有？这个就是我要说的，这块灰色的部分的大小就是#relative的大小，这个说明了什么？表明它会影响邻居节点的布局，而且邻居节点接下来的位置就是#relative使用一般margin定位的末端。讲详细点，就是说虽然#relative显示的在屏幕的位置是红色块的地方，但是实际仍然要占据它起始位置所在的布局（它的宽和高）的大小。这里#relative的起点是body，那么它站的布局就是从body起点开始width:250px;height:250px;（加padding:5px）的布局（大小），也就是我们看到图中灰色部分。呵呵，好绕是吗？仔细看看，多用下就明白了。

好了，现在就我们ajax标签导航中使用的是relative+absolute的结合，当一个absolute的节点包含在一个relative的节点中时，它的”原始点“就是relative节点了，而不是“参照浏览器的左上角-body”了，而它又不影响其邻居节点的布局，所以它就不会影响<li></li>中间文字（文本节点）的布局了（这里li的空间够大）。这样以来，就得到了我们标签中，每个标签后有一个分隔线的样式了。如图四：

" border="0" />

OK，我们对position属性和它的值的使用搞清楚了。接下来就来看看是怎么来更改当前选中标签（li）的样式吧:

程序代码：

.tabs li{
   float:left;
   display:inline;
   text-align:center;
   width:120px;
   height:12px;
   padding:4px 0 6px 0;
   overflow:hidden;
   letter-spacing:1px;
   position:relative;
}

/* 第一项被选中的样式 */
.tabs li.first{
   background-image:url(../img/tab_active1.gif);
}

/* 其他项被选中的样式 */
.tabs li.current{
   background-image:url(../img/tab_active2.gif);
}

/* 被选中项的字体样式 */
.tabs li.current,
.tabs li.first{
   font-weight:bold;
}

/* 被选中项的链接颜色样式 */
.tabs li.current a,
.tabs li.first a{
   color:#D45417;
}

.tabs li span{
   position:absolute;
   right:0;
   top:3px;
   width:2px;
   height:16px;
   overflow:hidden;
   font-size:1px;
   background-image:url(../img/tab_sline.gif);
}

/* 选中项和选中项前一项的样式 */
.tabs li.first span,
.tabs li.current span,
.tabs li.off span{/* 选中项前一项 */
   display:none;
}

这里要简单说的就是样式表CSS继承（层叠）的顺序，一定要是先写标签(li)标签默认（背景）样式再写选中时的（背景）样式，然后是默认分隔线（span）-> 选中时 -> 失去焦点时这样一个顺序。至于CSS的继承顺序的具体只是，大家可以google一下。

Javascript技巧篇（arguments对象的运用技巧）

好了，我们现在已经把CSS样式写好了，现在就开始用脚本来控制了。通过刚才讲解标签样式的时候，其实我们也基本把脚本控制的逻辑流程分析了下：

1. 选中当前标签的背景要区别显示；
2. 选中标签和其前一个标签的分隔线要隐藏；

不过在改变标签样式这个步骤开始之前我们要给我们的标签菜单（ul）来设置onclick事件（功能函数），从而触发改变当前选中项的样式的事件。到我们的主题了，呵呵！快来看看代码吧：

程序代码：

/* ===========================================================

* 函数名称：tabsEvent()

* 参数说明：要设置事件的DOM节点ID

* 函数功能：为导航TAB菜单（li）设置onclick处理方法（函数），

*           屏蔽掉a标签默认的处理（打开新链接）事件

* 返回值：false - 屏蔽掉a标签默认的处理（打开新链接）事件

* 使用方法：tabsEvent("news","sports");

============================================================ */
function tabsEvent(){
      for(var i=0;i<arguments.length;i++){
         var tabs = $(arguments[i]);
         // DOM节点（tabs）不存在或者浏览器不支持getElementsByTagName()方法
         // 函数不执行
           if(!tabs || !document.getElementsByTagName) return false;

           var theList = tabs.getElementsByTagName("li"); // 搜寻导航标签(ID为tabs)里的所有li标签
           var theLink = tabs.getElementsByTagName("a");  // 搜寻导航标签(ID为tabs)里的所有a标签

           for(var j=0;j<theList.length;j++){
                 var theTab = theList[j];
                 if(theTab.parentNode!=tabs) continue;

                 var theA = theLink[j];
                 // 屏蔽掉a标签默认的处理（打开新链接）事件
                 theA.onclick = function(){
                     return false;
                 }

                 // 为导航TAB菜单（li）设置onclick处理方法（函数）
                 theTab.onclick = function(){
                  var theClass = this.className;
                  if(theClass!="current" && theClass!="first"){
                            var objId = this.getAttribute("id").split("-")[1]; // 当前选中标签(li)在菜单（ul）中的索引值
                            var tarObj = this.getAttribute("id").split("-")[0]; // 要显示信息的目标DOM节点ID值
                       var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要异步加载的URL地址
                         ajaxInject($(tarObj),objId,tarObj,theURL);
                         return false;
                     }
               }
           }
      }
}

上面这段脚本，我们使用了$(i)函数获取DOM节点，方法就是$("DOMId")，这里就不多说了。这里要花些时间讲的是arguments对象，恩，...，恩，开始讲arguments对象了，注意听讲（不是在卖弄哦，这个我们经常要用到的，也很重要的一个知识点）：

Arguments是进行函数调用时，除了指定的参数外，还另外创建的一个隐藏对象。Arguments是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments 对象。arguments 对象只有函数开始时才可用。

”隐藏对象“，怎么个隐藏法呢？看看我们函数的写法吧：

程序代码：

function tabsEvent(){
...
}

而我在调用这个函数是确是这么写的：

程序代码：

“tabsEvent("news","sports");”, 我使用了参数，而我定义tabsEvent时，却没有使用形参（形参个数为零），就是这么个隐藏法。

它像数组，而又不是数组，怎么解释了？还是看个说明arguments不是数组(Array类)的代码:

程序代码：

Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);

function testAguments(){
alert(arguments.selfvalue);
}

运行代码你会发现第一个alert显示1，这表示数组对象拥有selfvalue属性，值为1。而当你调用函数testAguments时，你会发现显示的是“undefined”，说明了selfvalue不是arguments的属性，即arguments并不是一个数组对象。

呵呵，又说了这么多，要将就讲彻底些：caller、callee、apply、call都讲讲吧，^-^!

caller - 返回一个对函数的引用，该函数调用了当前函数。

对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。下面的例子说明了 caller 属性的用法：

程序代码：

我们通过handleCaller();调用执行callerDemo();时callerDemo.caller才定义，可以看到一个警告框，显示的反编译的handleCaller()的文本。而直接使用callerDemo();时，我们callerDemo函数的caller是没有定义的，所以你会看到”this is a top function“提示字符。

callee - 返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。用法[function.]arguments.callee，可选项 function 参数是当前正在执行的 Function 对象的名称。

callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时候用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

程序代码：

//callee可以打印其本身
function calleeDemo() {
   alert(arguments.callee);
}

//用于验证参数
function calleeLengthDemo(arg1, arg2) {
   if (arguments.length==arguments.callee.length) {
       alert("验证形参和实参长度一致！");
       return;
   }
   else {
       alert("实参长度：" +arguments.length);
       alert("形参长度： " +arguments.callee.length);
   }
}

//递归计算
var sum = function(n){
   if (n <= 0) {
      return 1;
   }
   else{
      return n + arguments.callee(n - 1);
   }
}

调用alert(sum(9));时，其中函数内部包含了对sum自身的引用，函数名仅仅是一个变量名，在函数内部调用sum即相当于调用一个全局变量，不能很好的体现出是调用自身，这时使用callee会是一个比较好的方法。

apply 和 call 它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式时有所区别：

程序代码：

apply(thisArg,argArray);

call(thisArg[,arg1,arg2…] ]);

即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

apply的说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisArg 任何一个参数，那么 Global 对象将被用作 thisArg，并且无法被传递任何参数。

call的说明：call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象。如果没有提供 thisArg 参数，那么 Global 对象被用作 thisArg。

应用call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。看下面示例:

程序代码：

// 继承的演示
function base() {
    this.member = "dnnsun_Member";
    this.method = function() {
         alert(this.member);
    }
}

function extend() {
    base.call(this);
    alert(member);
    alert(this.method);
}

上面的例子可以看出，通过call之后，extend可以继承到base的方法和属性。

呵呵，你可能发现了，在javascript框架prototype里就使用apply来创建一个定义类的模式，其实现代码如下：

程序代码：

var Class = {
   create: function() {
       return function() {
           this.initialize.apply(this, arguments);
       }
   }
}

从代码看,该对象仅包含一个方法：Create，其返回一个函数，即类。但这也同时是类的构造函数，其中调用initialize，而这个方法是在类创建时定义的初始化函数。通过如此途径，就可以实现prototype中的类创建模式，示例代码：

程序代码：

呵呵，越扯越多了，现在清楚了arguments对象的用法了吧！哈哈，还是有些收获的吧？^-^!!! 不过该回到我们的主题了，怎么实现点击标签(li)触发更改样式的事件。还是接着看我们的ajaxtab.js的代码吧：

程序代码：

for(var i=0;i<arguments.length;i++){
var tabs = $(arguments[i]);
}

看看上面讲的arguments的用法，呵呵，这里我们就获取了全部的标签导航菜单了。arguments.length = ？等于2，arguments[i]是什么，就是我们传的参数本身(tabsEvent("news","sports");)，那么$(arguments[i])就是我们的标签菜单,具体点就是$("news")和$("sports")了。

DOM技巧篇（DOM基础知识）

讲到这里，我们就要了解一下DOM的一些基础知识了。

DOM（Document Object Model 文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成有节点层级构成的文档。HTML或XML页面的每一个部分都是一个节点的衍生物。

光说可能还不怎么好理解，那么来看看我们ajax标签导航的DOM结构吧，如图五(截取的FIXFOX中的DOM图象)：

DOM通过创建树来表示文档，从而使开发着对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除，添加和替换节点。

简单的了解了什么是DOM后（要想了解更多的Javascript DOM 编程知识，推荐大家看看《Javascript DOM 编程艺术》和《Javascript高级编程》这两本书，还有到作者的网站去看看，也可以直接到W3C去查询相关信息。），来看看我们这个程序里需要用到的DOM知识吧：document.getElementsByTagName()还有之前提到的$(i)函数，它们都是做什么用的呢？

document.getElementById("DOMId")：它返回的是以ID为表示的节点，而大家都知道id在页面中是唯一的，所以getElementById是在页面中搜索DOM节点最直接的方法，很常用。不过它只能查寻单个的DOM节点，我们要查询一组怎么办呢？我们可以使用getElementsByTagName和getElementsByName。

从方法名字中的“Elements”我们也可以知道，这两个方法返回的是一组元素(数组)

getElementsByTagName：（核心[XML]DOM）用来返回一个包含所有tagName(标签名)特性等于某个指定值的元素的NodeList。

getElementsByName：（HTML DOM）用来获取所有name特性等于指定值的元素。但是这个方法在IE6和opera7.5中支持不是很好，会有错误产生，所以（个人）建议一般不要用。

OK，在对使用DOM来查寻节点的知识有了了解后，我们再来看这段代码：

程序代码：

/* ===========================================================

* 函数名称：$(i)

* 参数说明：i - 目标节点名称

* 函数功能：获取指定的目标DOM节点

* 返回值：返回要搜索的目标DOM节点

* 使用方法：$("frmSearch")

============================================================ */
function $(i){
      if(!document.getElementById)return false;
      if(typeof i==="string"){
              if(document.getElementById && document.getElementById(i)) {
                     // W3C DOM
               return document.getElementById(i);
         }
         else if (document.all && document.all(i)) {
                // MSIE 4 DOM
               return document.all(i);
         }
         else if (document.layers && document.layers[i]) {
                // NN 4 DOM.. note: this won't find nested layers
               return document.layers[i];
         }
         else {
               return false;
         }
      }
      else{return i;}
}

这个函数主要是来查找指定的DOM节点的，主要是通过document.getElementById()方法，但是我们又看到了document.all()和document.layers[]方法，这个就是浏览器大战时期（各个浏览器对DOM标准支持不程度不同），各大浏览器提供商制定的各自的DOM支持规范而造成的，我们的CSS HACKS其实也是由于这个原因才会出现的。扯远了，document.all()是IE浏览器（IE5以上版本）中特有的查询节点的方法，而document.layers[i]则是其他浏览器（主要是NetScape的）的浏览器特有的。我们通过$(i)函数来统一调用，从而解决了浏览器兼容的问题。

而下面这里的代码：

// DOM节点（tabs）不存在或者浏览器不支持getElementsByTagName()函数不执行
if(!tabs || !document.getElementsByTagName) return false;

这里if(!tabs || !document.getElementsByTagName) return false;这么写是很有必要的，这里是一种预留退路的思想（在《Javascript DOM 编程艺术》一书一直灌输的思想），这么写在不支持getElementsByTagName()方法时我们的函数就不会执行，在不tabs($("news")和$("sports")),不存在的时候（可能是我们把参数名写错了），函数也不执行了，从而避免了弹出或显示脚本错误的信息。下面我们还将看到这一思想的体现，不过我们还是先来看看紧接的代码：

var theList = tabs.getElementsByTagName("li"); // 搜寻导航标签(ID为tabs)里的所有li标签
var theLink = tabs.getElementsByTagName("a"); // 搜寻导航标签(ID为tabs)里的所有a标签

为什么要找出所有的li和a标签呢？呵呵，这个是由于我这里采取的设置样式的结构决定的（其实我也老是觉得不怎么好，不过这个思维个人比较好理解--头疼医头，脚疼医脚的方法）。看看我们上边的CSS样式，大家看到了，我们是用改变标签菜单（li）的样式来实现特别显示当前标签的。那么我这里就自然要获取所有的li标签，然后给他添加onclick来调用ajaxInject(ListName,tabId,tarObj,URL)，从而改变标签的样式。看看我来实现这个功能的代码吧：

程序代码：

for(var j=0;j<theList.length;j++){
                 var theTab = theList[j];
                 if(theTab.parentNode!=tabs) continue;

                 var theA = theLink[j];
                 // 屏蔽掉a标签默认的处理（打开新链接）事件
                 theA.onclick = function(){
                     return false;
                 }

                 // 为导航TAB菜单（li）设置onclick处理方法（函数）
                 theTab.onclick = function(){
                  var theClass = this.className;
                  if(theClass!="current" && theClass!="first"){
                            var objId = this.getAttribute("id").split("-")[1]; // 当前选中标签(li)在菜单（ul）中的索引值
                            var tarObj = this.getAttribute("id").split("-")[0]; // 要显示信息的目标DOM节点ID值
                       var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要异步加载的URL地址
                         ajaxInject($(tarObj),objId,tarObj,theURL);
                         return false;
                     }
               }
           }

我们通过使用一个for循环来遍历所有的li和a标签（由于它们个数相同，所以索引的值相同），然后分别为它们设置onclick事件。先看我们给a标签添加的事件的代码：

程序代码：

var theA = theLink[j];
// 屏蔽掉a标签默认的处理（打开新链接）事件
theA.onclick = function(){
return false;
}

一个简单的return false,可别小看它哦，有几个作用哦，首先a标签是嵌套在li标签里的，我们点li时就一定会出发a标签的默认行为，打开链接的页面。而我们ajax标签导航就是希望不刷（打开）新页面，在指定的DOM节点显示信息。当然就不能让a标签的默认行为启动了，而简单的一个return false;就解决了这个问题。哦，这里还有个问题就是DOM事件的冒泡的顺序，详细的介绍大家可以在《Javascript高级编程》一书中查到。

那有些朋友会问，为什么要在里面加个a标签呢？反正你是改变的是li的样式，点了li，改变li的样式，然后刷新指定DOM节点的信息不就完成了ajax标签导航的功能（效果）了吗？

是啊，不过我在这里要提的就是刚才提到的一个预留退路的思想，如果想上面说的那样做了，当然是没有什么问题，但前提是用户的浏览器支持javascript脚本，或者说用户打开了执行脚本的权限。一旦用户的浏览器不支持javascript或者出于安全原因关闭了脚本执行功能。这个时候，当用户点li时是没有任何反映的。而我这里的处理就考虑到了当javascript执行不了的情况，这时候，用户点链接就可以打开我们原本要用ajax加载的内容了。

其实这里还有各个比较简单的方法来达成我提到的相同的效果，就是对li使用onmouseover事件，想想为什么？因为只要鼠标划过时，就触发了ajaxInject($(tarObj),objId,tarObj,theURL);改变了标签的样式，刷新了内容。当点击链接时，就可以弹出页面了。现在网易和雅虎中国就是这么处理的。其实我这么做主要是处于个人习惯，比较喜欢用onclick，还有就是这里有个分隔线的效果，看上去比网易的只用一个背景图片酷，当然我的效果是学的雅虎（不是雅虎中国）的。不过雅虎的标签样式的处理方式要比我现在的更巧妙，下次有时间再跟大家分析下雅虎的标签导航效果。

又扯远了，OK，接下来我们就是要改变样式和ajax刷新内容了。不过在这个之前，看看我做了什么准备。

程序代码：

看看我文章前面部分罗列的东西，现在就在这里有了回应了

id="news" - news就是我们的导航标签的ID；
id="news-0" - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签[li]在导航标签中的索引值）

好现在就要改变标签的样式了

程序代码：

/* ===========================================================

* 函数名称：ajaxInject(ListName,tabId,tarObj,URL)

* 参数说明：ListName - 标签菜单DOM节点ID

*           tabId - 选中的标签（在ListName中的）索引值

*           tarObj - 要显示返回信息的目标DOM节点ID值

*           URL - 要异步处理的URL地址

* 函数功能：设置当前选中标签（li）的样式，

*           将返回信息写到指定DOM节点中。

* 返回值：无

* 使用方法：ajaxInject($(tarObj),objId,tarObj,theURL);

============================================================ */
function ajaxInject(ListName,tabId,tarObj,URL){
    if(!ListName || !document.getElementsByTagName) return false;
      var Tabs = ListName;
      var theLi = Tabs.getElementsByTagName("li");
      for(var i=0;i<theLi.length;i++){
            // 设置当前选中标签的样式
          if(i==tabId){
                if(i==0){
                     theLi[tabId].className = "first"; // 当选中第一项的样式
                }
                else{//
                     theLi[tabId].className = "current"; // 选中其他项的样式
                }
                var msgBox = tarObj+"Cnt";
                var loadstatustext="<div class='loading'><img src='img/loading.gif' alt='正在加载内容, 请稍候...' />正在加载内容, 请稍候...</div>";
              $(msgBox).innerHTML = loadstatustext; // 加载信息时的提示信息
              var para = "?d=" + Math.random(); // URL后的参数，接Math.random()（一个随机数）,目的是处理ajax的缓存问题
              var myAjax = ajaxUpdater(msgBox,"get",URL,para);
          }
          else{// 设置其他标签的样式
              theLi[i].className = "";
              if(tabId!=0){
                    theLi[tabId-1].className = "off"; // 当不是第一项时，隐藏选中项的前一项的分隔标签
                 }
          }
      }
}

这里又跟前面的

id="newsCnt" - newsCnt就是我们要写入信息的目标DOM节点；
class="first" - first当前(第一个)标签的样式；

对应起来了。

程序代码：

for(var i=0;i<theLi.length;i++){
            // 设置当前选中标签的样式
          if(i==tabId){
                if(i==0){
                     theLi[tabId].className = "first"; // 当选中第一项的样式
                }
                else{
                     theLi[tabId].className = "current"; // 选中其他项的样式
                }
            }
            else{// 设置其他标签的样式
              theLi[i].className = "";
              if(tabId!=0){
                    theLi[tabId-1].className = "off"; // 当不是第一项时，隐藏选中项的前一项的分隔标签
                 }
          }
}

上面这段代码就是具体改变样式的，i==tabId比较当前标签的索引值（作用就是确认是否是选中的标签），相等了就给标签设置样式了。i==0表明第一项被选种（由于我的第一项的背景特殊的）给它加上“first”样式，其余项被选中则加上“current”样式。

接这就是处理分隔钱的样式了，跟设置背景大同小意，这里要说的是我们在写CSS的时候要把li（选中和失去焦点）的样式设置好。还是我之前提到的，YAHOO的做得很好，我记得网上也有关于滑动门技术CSS写法的介绍，大家可以看看是怎么来设置样式的，还有这里给大家推荐个小软件《CSS Tab Designer 2》。

恩，现在要刷新指定DOM节点的内容了，用一个简单的var myAjax = ajaxUpdater(msgBox,"get",URL,para);就解决问题了。不过我们看看在把信息写到指定DOM节点前，我做了什么：

程序代码：

var msgBox = tarObj+"Cnt";
var loadstatustext="<div class='loading'><img src='img/loading.gif' alt='正在加载内容, 请稍候...' />正在加载内容, 请稍候...</div>";
$(msgBox).innerHTML = loadstatustext; // 加载信息时的提示信息

这里做了一个提示的处理，因为ajax是异步的加载，在获取很长（信息量很大）的内容时，会有一个延时，如果在这个期间不给任何提示信息的话，我们要刷新的DOM节点会出现白白的一片，这个当然是不美观的。所以在这之前，我们给用户一个提示信息，说明正在加载信息会显得更人性化些。当然，大家知道的网易的处理会更好些，做一个延迟的window.setTimeout效果。