分享一个刚写的纯Javascript实现的Tag选项卡插件。选项卡数量可以自定义，大小也可以自定义。只需要几行代码即可将它引入到您的网页中。

源代码：

/***
		author:pengyaou
		JavascriptTab选项卡插件
		使用时Context和Tabs的数目必须一致
		***/
		var TabPlug = {
			Width: "600",
			Height: "400",
			Parent: null,
			Context:["item1"],
			Tabs: ["选项卡1"],
			Initialize: function() {
				var tagContainer;
				var MainBody;
				for (var i = 0; i < this.Tabs.length; i  ) {
					if (MainBody == null) {
						MainBody = document.createElement("div");
						MainBody.style.width = this.Width   "px";
						MainBody.style.height = this.Height   "px";
						MainBody.style.border = "1px solid #ccc";
						MainBody.style.marginTop = "50px";
						this.Parent.appendChild(MainBody);
					}

					var tagBody = document.getElementById(this.Context[i]);
					tagBody.style.display="none";
					MainBody.appendChild(tagBody);

					if (tagContainer == null) {
						tagContainer = document.createElement("div");
						tagContainer.style.position = "absolute";
						tagContainer.style.marginTop = -this.Height - 32   "px";
						this.Parent.appendChild(tagContainer);
					}
					var childItem = document.createElement("div");
					childItem.className = "childItem";
					childItem.style.padding = "5px 20px 5px 20px";
					childItem.style.border = "1px solid #ccc";
					childItem.style.fontFamily = "微软雅黑";
					childItem.style.fontSize = "13px";
					childItem.style.float = "left";
					childItem.id = i;
					childItem.style.cursor = "pointer";
					childItem.style.marginLeft = i == 0 ? "0px" : "-1px";
					childItem.style.backgroundColor = "#efefef";
					childItem.innerHTML = this.Tabs[i];
					tagContainer.appendChild(childItem);
					childItem.onclick = function() {
						TabPlug.Select(this.id);
					}
				}
				TabPlug.Select(0);
			},
			Select: function(a) {
				for (var i = 0; i < TabPlug.Tabs.length; i  ) {
					document.getElementById(this.Context[i]).style.display = "none";
					document.getElementsByClassName("childItem")[i].style.backgroundColor = "#f2f2f2";
					document.getElementsByClassName("childItem")[i].style.marginTop = "0px";
					document.getElementsByClassName("childItem")[i].style.paddingBottom = "5px";
					document.getElementsByClassName("childItem")[i].style.borderBottom = "1px solid #ccc";
				}
				document.getElementById(this.Context[a]).style.display = "block";
				document.getElementsByClassName("childItem")[a].style.backgroundColor = "#fff";
				document.getElementsByClassName("childItem")[a].style.paddingBottom = "8px";
				document.getElementsByClassName("childItem")[a].style.marginTop = "-3px";
				document.getElementsByClassName("childItem")[a].style.borderBottom = "1px solid #fff";
			}
		}

使用方法：

//指定父级对象
			TabPlug.Parent = document.getElementById("Main");
			//选项卡名称数组
			TabPlug.Tabs = ["选项卡1", "选项卡2", "选项卡3", "选项卡4", "选项卡5"];
			//选项卡对应的内容容器
			TabPlug.Context=["item1", "item2", "item3", "item4", "item5"];
			//初始化
			TabPlug.Initialize();