- 时间：2020-11-17 14:17 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：使用javascript实现简单的选项卡切换
代码相当简洁、简单易懂，就不多废话了。
直接奉上代码：
[url=javascript:;]
<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="";
}
}
}
}
是不是很简单就实现了选项卡的切换效果呢，小伙伴们自己美化下就可以用到自己项目中去了。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
