js拼html加入tab,js(JavaScript)实现TAB标签切换效果的简单实例

BODY {FONT-SIZE: 14px; FONT-FAMILY: "宋体"}

OL LI { MARGIN: 8px}

#con { FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px}

#tags { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-

TOP: 0px; HEIGHT: 23px}

#tags LI {BACKGROUND: url(images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE:

none; HEIGHT: 23px}

#tags LI A {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(images/tagright.gif) no-repeat right bottom;

FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION:

none}

#tags LI.emptyTag {BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px}

#tags LI.selectTag {BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px}

#tags LI.selectTag A {BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px}

#tagContent { PADDING-RIGHT: 1px; BORDER: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px;  PADDING-TOP:

1px;  BACKGROUND-COLOR: #fff}

.tagContent {PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(images/bg.gif) repeat-x;

PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px}

#tagContent DIV.selectTag {DISPLAY: block}

• 标签一
• 标签二
• 自适应宽度的标签
• 自适应宽度

第一个标签的内容

第二个标签的内容

第三个标签的内容

第四个标签的内容

function selectTag(showContent,selfObj){

// 操作标签

var tag = document.getElementById("tags").getElementsByTagName("li");

var taglength = tag.length;

for(i=0; i

tag[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";

}