window.οnlοad=function(){ toTab(); } function getByClass(oParent,sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(var i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } function toTab(){ var oTag=document.getElementById("tags"); var aSpan=oTag.getElementsByTagName("span"); var oTab_con=document.getElementById("tagContent"); var aDivCon=getByClass(oTab_con,"innerCon"); for(var i=0;i<aSpan.length;i++){ aSpan[i].index=i; aSpan[i].οnclick=function(){ for(var i=0;i<aSpan.length;i++){ aSpan[i].className=""; aDivCon[i].style.display="none"; } aSpan[this.index].className="selectTag"; aDivCon[this.index].style.display="block"; } } }
/*信息发布部分*/
#tags{
border-bottom:1px solid #aecbd4;
margin:0px auto 0px;
width:900px;
height:34px;
line-height:34px;
}
#tags span{
cursor:pointer;
height:35px;
display:inline-block;
line-height:35px;
margin-top:-1px;
padding:0 13px;
font-size:13px;
float:left;
color:#ff8400;
}
#tags span.selectTag{
height:33px;
line-height:29px;
background:#fff;
color:#122E67;
border-top:3px solid #ff8400;
border-left:1px solid #aecbd4;
border-right:1px solid #aecbd4;
padding:0 12px;
}
#tagContent{
border:1px solid #aecbd4;
border-top:none;
width:898px;
height:auto;
background:#fff;
overflow:hidden;
margin:0 auto;
}
#tagContent .innerCon{
display:none;
}
<div id="tags"> <span class="selectTag">家庭作业管理</span> <span>家庭作业发布</span> </div> <div id="tagContent"> <div class="innerCon" style="display: block;" > </div> <div class="innerCon"> </div>