您的位置：首页 > Web前端 > JavaScript

用DIV+Javascript实现标签功能

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

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



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

<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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航