切换列表html

<STYLE type=text/css>
        OL LI {
            MARGIN: 8px
        }
        #con {
            FONT-SIZE: 12px; MARGIN: 0px auto;
        }
        #tags {
            PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; 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 {
            font-size: 16px;
            margin: 0 2rem; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; 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: #6653e8; border-bottom:2px solid #6653e8; height: 32px;
        }
        #tagContent {
            padding:1rem;
        }
        .tagContent {
            PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
        }
        #tagContent DIV.selectTag {
            DISPLAY: block
        }
</STYLE>

<DIV id=con>
     <UL id=tags>
           <LI class=selectTag>
               <A onClick="selectTag('tagContent0',this)"  href="javascript:void(0)">推荐</A>
           </LI>
           <LI>
                <A onClick="selectTag('tagContent1',this)"  href="javascript:void(0)">算法</A>
            </LI>
            <LI>
                 <A onClick="selectTag('tagContent2',this)"  href="javascript:void(0)">制造</A>
            </LI>
      </UL>
      <DIV id=tagContent>
             <DIV class="tagContent selectTag" id=tagContent0>推荐的内容</DIV>
             <DIV class=tagContent id=tagContent1>算法的内容</DIV>
             <DIV class=tagContent id=tagContent2>制造的内容</DIV>
      </DIV>
 </DIV>
 <SCRIPT type=text/javascript>
                                function selectTag(showContent,selfObj){
                                    // 操作标签
                                    var tag = document.getElementById("tags").getElementsByTagName("li");
                                    var taglength = tag.length;
                                    for(i=0; i<taglength; 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";
                                    
                                    
                                }
</SCRIPT>