使用javascript实现简单的选项卡切换


Posted in Javascript onJanuary 09, 2015

代码相当简洁、简单易懂,就不多废话了。

直接奉上代码:

<!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="";

            }

        }

    }

}

是不是很简单就实现了选项卡的切换效果呢,小伙伴们自己美化下就可以用到自己项目中去了。

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
javascript preload&amp;lazy load
May 13 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
angular4自定义组件详解
Sep 28 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
14个有用的Jquery技巧分享
Jan 08 #Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中的计时器timeit的使用方法
2017/10/20 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python while循环使用else语句代码实例
2020/02/07 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
成绩单公证书
2014/04/10 职场文书
社团活动总结书
2014/06/27 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android