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

所属分类：网络编程 / JavaScript 阅读数： 1255

收藏 0赞 0分享

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

直接奉上代码：

<!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>

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

BootStrap数据表格实例代码

基于vue的短信验证码倒计时demo

详解React Native开源时间日期选择器组件(react-native-datetime)

JS库particles.js创建超炫背景粒子插件(附源码下载)

JS库之Waypoints的用法详解

强大的JavaScript响应式图表Chartist.js的使用

详解wow.js中各种特效对应的类名

JS库之Highlight.js的用法详解

详解动画插件wow.js的使用方法

JS库 Highlightjs 添加代码行号的实现代码

网络赚钱

站长故事