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

更新时间：2015年01月09日 08:59:47 投稿：hebedich

本文主要介绍了使用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>

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

            }

        }

    }

}

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

您可能感兴趣的文章:

JS event使用方法详解
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。
2008-04-04
关于JS中的方法是否加括号的问题
在我们js编写程序的时候，我们会写很多函数然后调用它们，那么这些函数调用的时候什么时候加()什么时候不加()呢？下面小编给大家简单介绍下
2016-07-07
用javascript作一个通用向导说明
向导可以让你的网站用户快速上手使用你的web应用，提高网站的吸引力。向导一般分为好几个步骤，每个步骤收集一些数据，并且支持退回功能，所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用，灵活且简单的向导框架。
2011-08-08
layer.open属性详解及layer.open弹出框使用post方法举例
这篇文章主要给大家介绍了关于layer.open属性详解及layer.open弹出框使用post方法的相关资料,最近接触到layer弹窗,感觉弹窗功能异常强大,真的很方便,所以记录下来,需要的朋友可以参考下
2023-12-12
一文带你搞懂面试率超高的JS事件循环
事件循环是 JavaScript 中一个非常重要的概念，下面就来看看浏览器和 Node.js 中的事件循环的原理，以及两者之间的差异，感兴趣的可以了解一下
2022-10-10
ES6中async函数与await表达式的基本用法举例
async和await是我们进行Promise时的一个语法糖,async/await为了让我们书写代码时更加流畅,增强了代码的可读性,下面这篇文章主要给大家介绍了关于ES6中async函数与await表达式的基本用法,需要的朋友可以参考下
2022-07-07
用javascript父窗口控制只弹出一个子窗口
用javascript父窗口控制只弹出一个子窗口...
2007-04-04
JavaScript函数中this指向问题详解
这篇文章主要给大家介绍了关于JavaScript函数中this指向问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
JavaScript学习笔记之DOM基础 2.4
DOM(Document Object Model)，即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，下面小编把最近整理有关javascript笔记之DOM基础分享给大家，有需要的朋友可以参考下
2015-08-08
JavaScript类的继承全面示例讲解
在 ES5 中，类的继承可以有多种方式，然而过多的选择有时反而会成为障碍，ES6 统了类继承的写法，避免开发者在不同写法的细节之中过多纠缠，但在介绍新方法之前，还是有必要先回顾下ES5中类的继承方式
2022-08-08