/*** @author Supersha * @QQ:770104121 */ 이 코드는 계획 없이 작성되었기 때문에 상대적으로 거칠고 코멘트도 추가하지 않았습니다. 주요 기능: JavaScript 코드와 HTML은 완전히 분리되어 있습니다. 여러 개의 하위 div 태그를 마음대로 추가하고 자동으로 확장할 수 있습니다. JavaScript 코드: 코드 복사 코드는 다음과 같습니다. <br>var tag = function(parentTagId, sunTag){ <br>var oldHtml = [] ; <br>varspans=[]; <br>var tagElemment = document.getElementById(parentTagId); <br>var sunElems = tagElemment.getElementsByTagName(sunTag); = 0; i < sunElems .length; i ) { <BR>oldHtml[oldHtml.length] = sunElems[i].innerHTML; <BR>var newElem = document .createElement("div"); <BR>newElem.innerHTML = oldHtml[0]; //div 초기화 <BR>tagElemment.appendChild(newElem) <BR>varclearID = 0, index = 0; <BR>clearID = setInterval(function(){ <BR>if(index>=1) 범위[index-1].style.border="1px 점선 #ccc"; <br>if(index== sunElems.length-1) 인덱스 =0; <br>newElem.innerHTML = oldHtml[index]; <br>index <br>spans[index-1].style.border="1px solid #666"; >}, 2000); <br>for (var i = 0; i < oldHtml.length; i ) { <BR>varspan = document.createElement("span") <BR>span.innerHTML = (i 1).toString(); <BR>span.id="span_tab" i; <BR>span.html = oldHtml[i] //원본 div에 해당 HTML 저장 <BR>spans[i]=span ; <BR>span.onmouseover = function(){ <BR>if(index>=1)spans[index-1].style.border="1px dotted #ccc" <br>newElem.innerHTML = this.html ; //해당 할당<br>clearInterval(clearID); <br>} <br>span.onmouseout = function(){ <br>index=parseInt(this.innerHTML) <br>if(index>=1) 스팬[index-1] .style.border="1px solid #666"; <br>clearID = setInterval(function(){ <br>if(index>=1) 스팬[index-1].style.border= "1px 점선 #ccc" ; <br>if(index==sunElems.length-1) index=0; <br>newElem.innerHTML = oldHtml[index] <br>spans[index-1] ].style.border= "1px solid #666"; <br>} <br>tagElemment.appendChild(span) <br>span <br>} <br> [0].style.border="1px solid #666"; //스팬 초기화 <br>} <br>onload = function(){ <br>tag("tag", "div"); 함수<br>} <br> <br>#tag { <br>테두리: 1px 솔리드 <br>float: 왼쪽 ; <br>} # 태그 범위 { <br>경계: 1px 점선 #ccc; <br>배경: #eee; <br>여백: 8px; 범위:hover { <br>배경: #ccc; <br>테두리: 1px 솔리드 #666>} <br> HTML 코드: 코드 복사 코드는 다음과 같습니다. < p> 데모 1을 태그하세요. ; 데모 2를 태그하세요. 데모 3을 태그하세요. ; 데모 4를 태그하세요 데모 5를 태그하세요. . < ;/p>