Tab標簽切換
效果圖：
HTML部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{width:500px; margin:10px auto; }
#tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
#tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
#tag .current{ color:#000; background:#ccc; }
#tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div class="wrap">
<ul id="tag">
<li class="current" >標簽一</li>
<li>標簽二</li>
<li>標簽三</li>
<li>標簽4</li>
</ul>
<div id="tagContent">
<div> 內容一<br>內容一 </div>
<div> 內容二<br>內容二 </div>
<div> 內容三<br>內容三 </div>
<div> 內容4<br>內容4 </div>
</div>
</div>
</body>
</html>
Js方法一（此處應用了兩個FOR循環，代碼量比方法二稍多）
(function(){
var tag = document.getElementById("tag"),
tagLi = tag.getElementsByTagName("li"),
tagContent = document.getElementById("tagContent"),
tagContentDiv = tagContent.getElementsByTagName("div"),
len = tagLi.length;
tagContentDiv[0].style.display = "block";
for(var i=0;i<len;i++){
tagLi[i].onmouseover = function(t){
return function(){
this.className = "current";
tagContentDiv[t].style.display = "block";
for(var j=0;j<len;j++){
if(j!=t){
//alert(i);
tagLi[j].className = "";
tagContentDiv[j].style.display = "none";
}
}
}
}(i);
}
})()
方法二
var tag=document.getElementById("tag").children; //獲取Tag下的li，即Tag標簽
var content=document.getElementById("tagContent").children; //獲取Tag標簽對應的內容
content[0].style.display = "block"; //默認顯示第一個標簽的內容
var len= tag.length;
for(var i=0; i<len; i++)
{
tag[i].index=i; //設置對象的INDEX屬性，方便下面調用
tag[i].onclick = function() {
for(var n=0; n<len; n++) {
tag[n].className="";
content[n].style.display="none";
}
tag[this.index].className = "current";
content[this.index].style.display = "block";
}
}
方法三使用JQuery如下：
$(function(){
$("#tagContent div").eq(0).show();
$("#tag li").mouseover(
function(){
$(this).addClass("current").siblings().removeClass("current");
index = $("#tag li").index(this);
$("#tagContent div").eq(index).show().siblings().hide();
}
)
})
按對象封裝方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
#wrap{width:500px; margin:10px auto; }
#tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
#tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
#tag .current{ color:#000; background:#ccc; }
#tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div id="warp">
<ul id="tag">
<li>標簽一</li>
<li>標簽二</li>
<li>標簽三</li>
<li>標簽4</li>
<li>標簽5</li>
</ul>
<div id="tagContent">
<div class="J_tabClass"> 內容一<br>內容一 </div>
<div class="J_tabClass"> 內容二<br>內容二 </div>
<div class="J_tabClass"> 內容三<br>內容三 </div>
<div class="J_tabClass"> 內容4<br>內容4 </div>
<div class="J_tabClass"> 內容4<br>內容5555555555555555 </div>
</div>
</div>
<script type="text/javascript">
//nameSpace
var VVG = {};
VVG.DOM = {};
//創建getElementsByClassName方法
VVG.DOM.getElementsByClassName = function(str,parent,tag){
//父節點存在
if(parent){
// 當父節點為string類型時，查找DOM節點，否則直接引用parent
parent = typeof parent == "string" ? document.getElementById(parent):parent;
// parent為空時提示錯誤信息
if(!parent) alert("找不到標簽，請檢查參數是否正確");
}else{
// 未傳值時，父節點為body
parent = document.body;
}
// tagContent為節點類型，未傳值時為all節點
tag = tag || "*";
// 在父節點查找子節點，建立空數組arr
var els = parent.getElementsByTagName(tag),arr=[];
for(var i=0,n=els.length;i<n;i++){
// 查找每個節點下的classname，以空格分離為一個k數組
for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){
// 當K數組中有一個值與str值相等時，記住這個標簽並推入arr數組
if(k[j]==str){
arr.push(els[i]);
break;
}
}
}
// 返回數組
return arr;
}
//創建TabManager對象
VVG.TabManager = function(oo){
this.root = oo.root || "warp";
this.tabUlId = oo.tabUlId||"tabUlId";
this.tabConId = oo.tabConId||"tabConId";
this.tabConClass = oo.tabConClass||"J_tabClass";
this.trggle = oo.trggle || "click";
this.currentCss = oo.currentCss || "current";
}
VVG.TabManager.prototype = {
tabChange:function(){
// 獲取UL的id
var ulid = document.getElementById(this.tabUlId);
// 獲取UL下的LI元素
var ulli = ulid.getElementsByTagName("li");
// 獲取內容盒子DIV元素
var tabConId = document.getElementById(this.tabConId);
// 獲取root下的div的class為特定值的對象數組
var tabConClasses = VVG.DOM.getElementsByClassName(this.tabConClass,this.root,"div");
// 初始化
ulli[0].className = this.currentCss;
tabConClasses[0].style.display = 'block';
for (var i = ulli.length - 1; i >= 0; i--) {
// 賦值this 與 that,避免this混亂
var that = this;
// 設置對象index屬性
ulli[i].index = i;
// 設置對象的事件
ulli[i]["on" + this.trggle] = function(){
for(var j = tabConClasses.length - 1; j >= 0; j--){
tabConClasses[j].style.display = "none";
ulli[j].className = "";
}
tabConClasses[this.index].style.display = "block";
this.className = that.currentCss;
}
}
}
}
// 新建對象實例
var TabManager1 = new VVG.TabManager(
{
root:"warp",//包裹tab對象的div層的ID名稱，必填
tabUlId:"tag",//TAB標簽LI元素的父親UL元素的ID名稱，必填
tabConId:"tagContent",//內容元素的包裹盒子的ID名稱，必填
trggle:"mouseover",//切換方式，默認為click，可選
currentCss:"current",//TAB標簽liy元素的當前CSS名稱，默認為current
tabConClass:"J_tabClass",//內容元素的CLASS名稱，默認為J_tabClass
}
);
// 調用對象方法
TabManager1.tabChange();
</script>
</body>
</html>