用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 id="content1">第一个label的内容</div>
 
 
<div id="content2">第一个labe2的内容</div>
 
 
<div id="content2">第一个labe2的内容</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

你可能没有意识到这种办法会有什么问题，当一个页面有非常多的标签块的话，我们将不得不面临一个问题，那就是id的命名问题，我们将要为每一个内容区域命名，这样不仅增加了代码量，也增加了javascript编写的难度，我们不可能为每一个标签块写一堆javascript，就算我将javascript写成一个函数或者一个类，我们也会而临另一个问题，就是调用的时候会有一大堆的参数，因为你需要将这个id传送过去。并且，很容易因为人为的疏忽造成错误。
下面，来看看我是如何实现这个功能的吧，可能不是最好的方法，如果你有更好的方法，希望你能告诉我，让我们一起进步。
首先，我们要做的是写好基本的html代码，代码如下：

<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 class="Content3" style="display: none;">这时里是标签3对应的内容</div>
</div>

写好基本html代码后，我们还需要做一项重要的工作，那就是css样式，因为li如果没有css样式控制，标签就会以列表的形式出现，基本的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;      }    -->

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

 function LabelAddEvent()
  {
   var labels = document.getElementById("Label").childNodes;        //获取ID为Label无素下的所有子节点，childNodes是DOM的一个属性
   //对所有子节点进行循环，增加onmouseover事件，也可以根据需要添加onclick事件
   for(var iLoop = 0; iLoop &lt; 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 &lt; 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/]，原文链接：http://iove.net/archives/734.html，网站转载请注明来源于涂雅并保留原文链接，否则视为侵权。

嗯，或者你也可以收听我的微博，腾讯微博(主要用这个，其他的看我的个人介绍)

我写博客常常出现错别字，常常错得还很离谱，有时候我自己看了第二遍都骂我自个儿，但我又不习惯重复审查，纠结啊...各位看到啥错别字或者不明白的地方，请给我留言指出来，感谢感谢。

评论敬告那些为做SEO而评论的朋友，本博不欢迎此类评论，请不要利用本博做关键字，一律封杀。

腾讯微博

订阅涂雅

涂雅是谁？

联系涂雅

分类

最新评论

最近文章

推荐网站