原生JS实现Tab切换-优快云博客

本文介绍如何使用原生JavaScript实现简单的Tab切换效果，包括HTML结构、CSS样式及JavaScript代码，帮助读者理解基本的DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 在线压缩： http://ganquan.info/yui

由于一开始接触的就是jQuery，因而切实对Javascript了解的不是很深入，很多方法都不会使用原生态的JS方法。因为jQuery封装了很多方法，所以很多时候用起来很方便。但是，在性能上却远不如原生的JS，因为需要带一个很大的jQuery库文件。  我的学习方法一开始就走反了，现在开始学习原生的js，一点一点积累吧！

1、实现简单的Tab切换
Js:

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";
}

HTML:

<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>
        <li><a onClick="selectTag('tagContent3',this)" href="javascript:void(0)">基金课堂</a> </li>
        <li><a onClick="selectTag('tagContent4',this)" href="javascript:void(0)">公示信息</a> </li>
      <!--<div style="clear:both"></div>-->
    </ul>

    <div id=tagContent>
    <div class="tagContent selectTag" id="tagContent0">第一个标签的内容</div>
    <div class="tagContent" id="tagContent1">第二个标签的内容97站长网</div>
    <div class="tagContent" id="tagContent2">第三个标签的内容</div>
    <div class="tagContent" id="tagContent3">第四个标签的内容</div>
    <div class="tagContent" id="tagContent4">第五个标签的内容</div>
    </div>
</div>

CSS:

#con {
    font-size: 12px; 
    width: 600px;
}
#tags {
    padding: 0px; 
    width: 400px; 
    float:left;
}
#tags li {  
    float: left;    
    list-style-type: none; 
}
#tags li a {
    padding:0 10px 0 10px; 
    float: left; 
    color: #999; 
    line-height: 23px; 
    height: 25px; 
    text-decoration: none;
    border-top:solid 1px #CCC;
    border-right:solid 1px #CCC;
    margin-bottom: -2px;
}
#tags li.selectTag {
    margin-bottom: -2px;
    background-color:#fff;
    position: relative; 
    height: 25px;
    border-bottom:0px;
}
#tags li.selectTag a {
    color: #000; 
    line-height: 25px; 
    height: 25px;

}
.tagContent {
    padding: 10px; 
    display: none; 
    width: 576px; 
    color: #474747; 
    height: 250px;
}
#tagContent {
    border: #aecbd4 1px solid; 
    float:left;
    background-color: #fff;
}
#tagContent div.selectTag {
    display: block;

}