J度空间

用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配置的多标签块的教程，如果你觉得有什么更好的方法可以实现， 请你与我联系，让我们共同进步。

  
  版权所有©Conis，复制或者转载请保留此信息，任何人未经许可，不得擅自将本文发布作为商业用途。
  更多内容更多精彩请您访问http://www.conis.cn

posted on 2007-08-28 12:47 蓝色幽默 阅读(904) 评论(1)  编辑  收藏 所属分类: 网页设计

评论

# re: 用DIV+Javascript实现标签功能 2008-04-23 09:02 免贵

实现不了  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航:
 

导航

<2008年4月>
日一二三四五六
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

统计

常用链接

留言簿(4)

随笔分类

文章分类

相册

搜索

最新评论