用DIV+Javascript实现标签功能

　　现在很多网站都用到了标签的切换功能，新浪、迅雷等网站都有，应该说用很很泛滥了。其实标签功能是Windows程序中的一种功能，在Delphi或VB等Windows程序开的环境中，很容易就能创建各种漂亮而又功能强大的标签功能，但在Web开发中，就没有这种便利了。

　　只需要销加改动，标签的数量可以自由添加，而无需要为标签添加ID，实际上这个功能除了用到Div、Javascript之后，很重要的是要用到CSS样式。

图1

　　首先我们要确定我们要做什么，我们要做成一个带三个标签的区域(图1)，点击标签标签列表的其中一个标签，内容区域会根据当前点击的标签显示不同的内容。按照我们一般的做法是每一个标签对应一个内容区域，给每个内容区域增加一个id属性，然后为每一个标签添加一个属性，就像这样：

 <div>  
  <div>  
   <div id="label1" onmousemove="dosomething()">label1<div>  
   <div id="label2" onmousemove="dosomething()">label2<div>  
   <div id="label2" onmousemove="dosomething()">label2<div>  
  </div>  
  <div>  
   <div id="content1">第一个label的内容</div>  
   <div id="content2">第一个labe2的内容</div>  
   <div id="content2">第一个labe2的内容</div>  
  <div>    
 </div>

你可能没有意识到这种办法会有什么问题，当一个页面有非常多的标签块的话，我们将不得不面临一个问题，那就是id的命名问题，我们将要为每一个内容区域命名，这样不仅增加了代码量，也增加了javascript编写的难度，我们不可能为每一个标签块写一堆javascript，就算我将javascript写成一个函数或者一个类，我们也会而临另一个问题，就是调用的时候会有一大堆的参数，因为你需要将这个id传送过去。并且，很容易因为人为的疏忽造成错误。

　　下面，来看看我是如何实现这个功能的吧，可能不是最好的方法，如果你有更好的方法，希望你能告诉我，让我们一起进步。

　首先，我们要做的是写好基本的html代码，代码如下：

 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 </head>  
 
 <body>  
 <ul id="Label">  
  <!--我们将第一个标签的背景色设置红色，因为默认显示的是第一个标签的内容-->  
  <li class="CurrentLabel" style="background-color: red">标签1</li>  
  <li>标签2</li>  
  <li>标签3</li>  
 </ul>  
 <div id="Container">  
     <div>这时里是标签1对应的内容</div>  
     <!--因为默认是不显示的，所以要将display属性设置为none-->  
     <div style="display: none">这时里是标签2对应的内容</div>  
     <div style="display: none" class="Content3">这时里是标签3对应的内容</div>  
 </div>  
 </body>  
 </html>

写好基本html代码后，我们还需要做一项重要的工作，那就是css样式，因为li如果没有css样式控制，标签就会以列表的形式出现，基本的CSS样式代码如下：

 <style type="text/css">   
  #Label li   
  {   
   /*设置ID为Label的元素下所有li元素样式，主要是要设置float:left这个属性，这样才能将li元素排成一排；同时设置了list-style:none这个属性，目的是防止li元素出现实心圆点*/  
   margin-left: 1px;   
   padding: 3px;   
   width: 40px;   
   background-color:#94A5F8;   
   float:left;   
   list-style:none;   
   cursor:pointer;   
  }   
 </style>

　　下面，我们将要进行最重要的一环了，就是javascript，看到你里，你可能会问，为什么标签li元素没有事件呢？如何实现标签的切换呢，这是因为我考虑了另一个问题，如果我们需要为每一个标签添加一个事件的话，确实是一件很麻烦的事情，而且当标签块多了的时候，就会增加代码量，所以我考虑使用动态添加属性的方式为每一个标签添加属性。

 function LabelAddEvent()   
  {   
   var labels = document.getElementById("Label").childNodes;        //获取ID为Label无素下的所有子节点，childNodes是DOM的一个属性   
   //对所有子节点进行循环，增加onmouseover事件，也可以根据需要添加onclick事件   
   for(var iLoop = 0; iLoop < labels.length; iLoop ++)   
   {   
    var label = labels[iLoop];   
    if ("LI" == label.nodeName)   //只处理LI的DOM节点，目的是为了兼容Firefox，因为Firefox会把空格与换行与当成一个节点处理   
    {   
     label.value = iLoop;        //为每一个标签的value赋上当前的索引，当点击标签的时候不用循环标签就知道是哪一个标签了   
     label.onmouseover = function()   
     {   
      ChangeLabel(this);          //调用ChangeLabel函数，并把当前对象传过去   
     };   
    }   
   }   
  }

　　然后，我们在html页的最后面，调用LabelAddEvent这个函数，即可以为所有标签添加函数了，是不是很简洁，当我们有很多标签块的时候，就不必要为每个标签块添加事件了，下面我们来看看ChangeLabel这个函数：

  function ChangeLabel(oCur)   
  {   
   //获取所有的内容元素子节点   
   var containers = document.getElementById("Container").childNodes;   
 　//获取所有的标签   
   var labels = document.getElementById("Label").childNodes;   
   for(var iLoop = 0; iLoop < containers.length; iLoop ++)   
   {   
    var container = containers[iLoop];      
    var label = labels[iLoop];   
    //根据索引是否为li元素的value值来判断是否为当前标签   
    var current = iLoop == oCur.value;     
    if ("DIV" == container.nodeName) container.style.display = current ? "block" : "none";   
    if ("LI" == label.nodeName) label.style.backgroundColor = current ? "red" : "#94A5F8";   
   }   
  }

　　主要代码就是这么多了，是不是很简洁呢？当有很多个标签块的候，你就会发现这个方法的优势了，事实下，我们还可以简单修改一下javascript代码，实现多个标签块在一个页面中的功能，接下来我准备结合Xml及Xslt写一个根据xml配置的多标签块的教程，如果你觉得有什么更好的方法可以实现，请你与我联系，让我们共同进步。

　　效果演示

　　示例代码下载

　　后记：Xslt结合xml的例子实现标签的例子已经写完，请访问用Xslt/CSS/Xml/Javascript做标签

注意：本文为我的独立博客镜像博客，自发表不再更新，原文可能随时被更新，敬请访问原文。同时，请大家不要在此评论，如果有什么看法，请点击这里：http://iove.net/1705/

本文来自http://iove.net，欢迎转载，转载敬请保留相关链接，否则视为侵权，原文链接：http://iove.net/1705/

posted on 2007-07-21 15:07 Conis 阅读(1094) 评论(0) 收藏举报