使用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="";
}
}
}
}
是不是很简单就实现了选项卡的切换效果呢，小伙伴们自己美化下就可以用到自己项目中去了。
-
本文向大家介绍jQuery简单实现tab选项卡切换效果，包括了jQuery简单实现tab选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~ 效果图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现Tab选项卡切换效果简单演示，包括了jQuery实现Tab选项卡切换效果简单演示的使用技巧和注意事项，需要的朋友参考一下 本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示，完全是自己的思考实现过程，分享给大家供大家参考。具体如下： 起初我Html代码架子是这样的： 后来换成了下面这个： 之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比
-
本文向大家介绍jQuery实现TAB选项卡切换特效简单演示，包括了jQuery实现TAB选项卡切换特效简单演示的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下 1、tab切换 on 2、tab切换 mouseenter 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍vue实现选项卡及选项卡切换效果，包括了vue实现选项卡及选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍，既然是从入门到实战，我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查，再回过头来看我的实现代码。记住，通读Vue文档真的很重要，很重要！ 这里的V
-
本文向大家介绍js实现简单选项卡与自动切换效果的方法，包括了js实现简单选项卡与自动切换效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下： 这里再上篇《js实现简单的可切换选项卡效果》基础上，进一步实现可以自动切换的切换效果，用这种效果就可以做简单的焦点图了。 说明： 设置一个标识数字置为0，写一个每过几秒
-
本文向大家介绍Android ViewPager实现选项卡切换，包括了Android ViewPager实现选项卡切换的使用技巧和注意事项，需要的朋友参考一下 本文实例介绍了ViewPager实现选项卡切换，效果图如下： 步骤一：这里使用兼容低版本的v4包进行布局，这里eclipse没有输入提示，所以要手动输入，文件名称“activity_main.xml” 步骤二：选项卡中的内容都是从布局文件中