使用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 相关文章推荐
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
详解Javascript继承的实现
Mar 25 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
个人小程序接入支付解决方案
May 23 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
答谢词范文
2015/01/05 职场文书
滴水洞导游词
2015/02/10 职场文书
银行稽核岗位职责
2015/04/13 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript