JS (javaScript)에 사용할 수있는 탭 태그 스위칭 코드는 너비에 자동으로 적응할 수 있으며 바보 같은 작업으로 직접 태그 블록을 추가하고 삭제할 수 있습니다!
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3c.org/tr/1999/rec-html401-
19991224/looke.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<meta name = "keywords"content = "js 코드, 탭 태그, JS 광고 코드, JS 특수 효과 코드, Yuewei Caotang" />
<title> 적응 폭에 대한 태그 탐색 </title>
<meta http-equiv = content-type content = "text/html; charset = gb2312">
<스타일 유형 = 텍스트/CSS>
바디 {font-size : 14px;
ol li {마진 : 8px}
#con {font-size : 12px;
#Padding-Right : 0px;
상단 : 0px; 높이 : 23px}
#tags li {background : images/tagleft.gif) float : 왼쪽;
없음; 높이 높이 : 23px}
#tags li {padding-right : padding-left : 10px;
플로트 : 왼쪽;
없음}
#tags li.Emptytag {배경 : None Transparent Scroll은 0% 0%;
#TAGS LI.SelectTag {배경 위치 : -2px;
#TAGS LI.SelectTag {배경 위치 : #000;
#TAGCONTENT {Padding-Right : #AECBD4 SILD;
1px; 배경 배경 : #fff}
.TAGCONTENT {Padding-Right : 10px;
패딩-바닥 : 576px;
#TagContent Div.SelectTag {display : block}
</스타일>
<meta content = "mshtml 6.00.2800.1589"name = generator> </head>
<body>
<div id = con>
<ul id = 태그>
<li class = selectTag> <a onMouseOver = "selectTag ( 'tagcontent0', this)"href = "javaScript : void (0)"> tag 1 </a> </li>
<li> <a onmouseover = "selectTag ( 'tagcontent1', this)"href = "javaScript : void (0)"> tag 2 </a> </li>
<li> <a onmouseover = "selectTag ( 'tagcontent2', this)"href = "javaScript : void (0)"> 적응성 폭이있는 태그 </a> </li>
<li> <a onMouseOver = "selectTag ( 'tagcontent3', this)"href = "javaScript : void (0)"> 적응성 너비 </a> </li>
</ul>
<div id = tagcontent>
<div class = tagcontent id = tagcontent0> 첫 번째 태그의 내용 </div>
<div id = tagcontent1> 두 번째 태그의 내용 </div>
<div class = tagcontent id = tagcontent2> 세 번째 태그의 내용 </div>
<div class = tagcontent id = tagcontent3> 네 번째 태그의 내용 </div>
</div>
</div>
<스크립트 유형 = 텍스트/JavaScript>
함수 selecttag (showcontent, selfobj) {
// 작동 태그
var tag = document.getElementById ( "tags"). getElementsByTagName ( "li");
var taglength = tag.length;
for (i = 0; i <taglength; i ++) {
태그 [i] .classname = "";
}
selfobj.parentNode.className = "SelectTag";
// 작동 컨텐츠
for (i = 0; j = document.getElementById ( "tagcontent"+i); i ++) {
j.style.display = "none";
}
document.getElementById (showContent) .style.display = "block";
}
</스크립트>
</body> </html>