/**
* @author Supersha
* @QQ:770104121
*/
由于在沒有規(guī)劃好的情況下寫的這個(gè)代碼，寫的比較粗糙，也沒有添加注釋。
主要特點(diǎn)：JavaScript代碼和HTML完全分離；可以隨意添加多個(gè)子div標(biāo)簽，自動擴(kuò)展
JavaScript代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var tag = function(parentTagId, sunTag){ 
var oldHtml = []; 
var spans=[]; 
var tagElemment = document.getElementById(parentTagId); 
var sunElems = tagElemment.getElementsByTagName(sunTag); 
for (var i = 0; i < sunElems.length; i++) { 
oldHtml[oldHtml.length] = sunElems[i].innerHTML; 
sunElems[i].style.display = "none"; 
} 
var newElem = document.createElement("div"); 
newElem.innerHTML = oldHtml[0]; //初始化div 
tagElemment.appendChild(newElem); 
var clearID = 0, index = 0; 
clearID = setInterval(function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
if(index==sunElems.length-1) index=0; 
newElem.innerHTML = oldHtml[index]; 
index++; 
spans[index-1].style.border="1px solid #666"; 
}, 2000); 
for (var i = 0; i < oldHtml.length; i++) { 
var span = document.createElement("span"); 
span.innerHTML = (i + 1).toString(); 
span.id="span_tab"+i; 
span.html = oldHtml[i]; //存儲對應(yīng)的原來的div裏面的HTML 
spans[i]=span; 
span.onmouseover = function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
newElem.innerHTML = this.html; //對應(yīng)賦值 
clearInterval(clearID); 
} 
span.onmouseout = function(){ 
index=parseInt(this.innerHTML); 
if(index>=1) spans[index-1].style.border="1px solid #666"; 
clearID = setInterval(function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
if(index==sunElems.length-1) index=0; 
newElem.innerHTML = oldHtml[index]; 
index++; 
spans[index-1].style.border="1px solid #666"; 
}, 2000); 
} 
tagElemment.appendChild(span); 
span = null; 
} 
spans[0].style.border="1px solid #666"; //初始化span 
} 
onload = function(){ 
tag("tag", "div"); //調(diào)用tag函數(shù) 
} 
</script> 
<style type="text/css"> 
#tag { 
border: 1px solid #eee; 
float: left; 
} #tag span { 
border: 1px dotted #ccc; 
background: #eee; 
padding: 1px 6px; 
margin-right: 8px; 
} #tag span:hover { 
background: #ccc; 
border: 1px solid #666; 
} 
</style> 

HTML代碼：

復(fù)制代碼代碼如下:

 
<div id="tag"> 
<div> 
<p> 
<b>Tag demo 1,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 2,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 3,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 4,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 5,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 6,</b> 
I will achive it. 
</p> 
</div> 
<!--....可以隨意添加多個(gè)tag....--> 
</div> 