JavaScript实现简单选项卡切换效果

JavaScript实现简单选项卡切换效果

实现该功能的核心代码逻辑简洁明了，便于理解，此处不再赘述。

以下是完整的代码实现：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<title>js简单选项卡</title>
<script type="text/javascript" src="js/demo.js"></script>
<style type="text/css">
 *{ font-size: 14px;margin: 0px;}
 a{color:#a0b3d6;text-decoration: none;}
 .tabs{border:1px solid #a0b3d6;margin:100px;width:350px;}
 .tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6; float:left;}
 .tabs-nav .on{background:white; border-bottom:1px solid white; position:relative;}
 .tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
 .tabs-content_hide{display: none;}
 </style>
</head>
 <body>
 <div class="tabs" id="tabs">
 <h2 class="tabs-nav clearfix">
 <a href="javascript:;" class="on">首页</a>
 <a href="javascript:;">技术</a>
 <a href="javascript:;">生活</a>
 <a href="javascript:;">作品</a>
 </h2>
 <div style="clear:both;"></div>
 <p class="tabs-content">首页</p>
 <p class="tabs-content_hide">技术</p>
 <p class="tabs-content_hide">生活</p>
 <p class="tabs-content_hide">作品</p>
 </div>
 
 </body>
<footer></footer>
</html>

------demo.js---------------

window.onload=function(){
tabs("tabs","mouseover");
}
function tabs(id,trigger){
var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a");
var tabsContent = document.getElementById(id).getElementsByTagName("p");
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].index = i;
if(trigger=='mouseover'){
tabBtn[i].onmouseover=function(){
clearClass();
this.className="on";
showContent(this.index);
            }
        }
function showContent(n){
for (var i=0; i<tabsContent.length ;i++) {
tabsContent[i].index = i;
tabsContent[i].className = "tabs-content_hide";
        }
tabsContent[n].className="tabs-content";
    }
function clearClass(){
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].className="";
            }
        }
    }
}

通过以上步骤，即可实现基础的选项卡切换效果。开发者可根据实际需求对样式进行美化，并将其集成到具体项目中。