编程 Javascript

使用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实现简单的选项卡切换

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

FF IE兼容性的修改小结

Sep 02 Javascript

chrome浏览器不支持onmouseleave事件的解决技巧

May 31 Javascript

JS通过相同的name进行表格求和代码

Aug 18 Javascript

jQuery中判断对象是否存在的方法汇总

Feb 24 Javascript

JavaScript设计模式经典之工厂模式

Feb 24 Javascript

JS中位置与大小的获取方法

Nov 22 Javascript

原生js简单实现放大镜特效

May 16 Javascript

实现两个文本框同时输入的实例

Sep 25 Javascript

vue select组件的使用与禁用实现代码

Apr 10 Javascript

javascript标准库(js的标准内置对象)总结

May 26 Javascript

解决Vue-cli npm run build生产环境打包,本地不能打开的问题

Sep 20 Javascript

React实现动效弹窗组件

Jun 21 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

Discuz! Passport 通行证整合

2008/03/27 PHP

PHP图片处理类 phpThumb参数用法介绍

2012/03/11 PHP

探讨php中防止SQL注入最好的方法是什么

2013/06/10 PHP

浅析php中jsonp的跨域实例

2013/06/21 PHP

php导出中文内容excel文件类实例

2015/07/06 PHP

laravel5.1框架基础之Blade模板继承简单使用方法分析

2019/09/05 PHP

JSDoc 介绍使用规范JsDoc的使用介绍

2011/02/12 Javascript

JS在TextArea光标位置插入文字并实现移动光标到文字末尾

2013/06/21 Javascript

Javascript 学习笔记之对象篇（二） : 原型对象

2014/06/24 Javascript

node.js中的fs.unlinkSync方法使用说明

2014/12/15 Javascript

Angular Js文件上传之form-data

2015/08/28 Javascript

javascript性能优化之DOM交互操作实例分析

2015/12/12 Javascript

JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

2016/09/19 Javascript

js+div+css下拉导航菜单完整代码分享

2016/12/28 Javascript

vue中的非父子间的通讯问题简单的实例代码

2017/07/19 Javascript

Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

2017/12/27 Javascript

基于js 各种排序方法和sort方法的区别(详解)

2018/01/03 Javascript

JavaScript数据结构之栈实例用法

2019/01/18 Javascript

微信小程序全局变量功能与用法详解

2019/01/22 Javascript

JavaScript制作3D旋转相册

2020/08/02 Javascript

这样回答继承可能面试官更满意

2019/12/10 Javascript

django 发送手机验证码的示例代码

2018/04/25 Python

django传值给模板, 再用JS接收并进行操作的实例

2018/05/28 Python

Python 实现域名解析为ip的方法

2019/02/14 Python

python requests库爬取豆瓣电视剧数据并保存到本地详解

2019/08/10 Python

Tensorflow 1.0之后模型文件、权重数值的读取方式

2020/02/12 Python

pandas和spark dataframe互相转换实例详解

2020/02/18 Python

Web前端绘制0.5像素的几种方法

2017/08/11 HTML / CSS

意大利会呼吸的鞋：Geox健乐士

2017/02/12 全球购物

Mamaearth官方网站：印度母婴护理产品公司

2019/10/06 全球购物

ANINE BING官方网站：奢华的衣橱基本款和时尚永恒的单品

2019/11/26 全球购物

自我鉴定的范文

2013/10/03 职场文书

优秀党员学习焦裕禄精神思想汇报范文

2014/09/10 职场文书

推荐信范文大全

2015/03/27 职场文书

React Native项目框架搭建的一些心得体会

2021/05/28 Javascript

一文搞清楚MySQL count(*)、count(1)、count(col)区别

2022/03/03 MySQL