用js语句实现网页中的选项卡（两种方法）

最新推荐文章于 2021-06-03 04:04:52 发布

domunweb

最新推荐文章于 2021-06-03 04:04:52 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： javascript 选项卡

本文链接：https://blog.csdn.net/domunweb/article/details/73301980

版权

前端专栏收录该内容

23 篇文章 3 订阅

订阅专栏

用js语句实现网页中的选项卡

网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。

方法一：

方法一利用简单的代码即可实现，以下是全部的代码；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #box{width: 600px;background: #ccc;margin: 0 auto;}
            li{list-style: none;}
            #ul1{display: block; width: 100%;overflow: hidden;}
            #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
            #content{width: 100%;margin-top: 20px;}
            #content div{display: none;}
            #content div.active{display: block;}
            .show{background: red;}
        </style>
    </head>
    <body>
        <div id="box">
            <ul id="ul1">
                <li>首页</li>
                <li>产品</li>
                <li>新闻</li>
                <li>联系</li>
                <li>我的</li>
            </ul>
            <div id="content">
                <div class="active">
                    <ul>
                        <li>new1</li>
                        <li>new2</li>
                        <li>new3</li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>new4</li>
                        <li>new5</li>
                        <li>new6</li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>new7</li>
                        <li>new8</li>
                        <li>new9</li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>new10</li>
                        <li>new11</li>
                        <li>new12</li>

                    </ul>
                </div>
                    <div>
                    <ul>
                        <li>new13</li>
                        <li>new14</li>
                        <li>new15</li>

                    </ul>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            window.onload=function(){
                var oli=document.getElementById("ul1").getElementsByTagName("li");
                //alert(oli.length);
                var odiv=document.getElementById("content").getElementsByTagName("div");
                //alert(odiv.length)
                for(var i=0;i<oli.length;i++){
                    oli[i]._index=i;
                    oli[i].onclick=function(){
                        //alert(i);
                        for(i=0;i<oli.length;i++){

                            oli[i].className='';
                            odiv[i].style.display='none';
                        }
                        this.className='show';
                        odiv[this._index].style.display='block';
                    }

                }

            }
        </script>
    </body>
</html>

首先我们在HTML部分定义网页选项卡中的内容。

<div id="box">
            <ul id="ul1"><!--选项卡中的点击部分-->
                <li>首页</li>
                <li>产品</li>
                <li>新闻</li>
                <li>联系</li>
                <li>我的</li>
            </ul>
            <div id="content"> 
                <div class="active"><!--选项卡中要显示和被显示的部分-->
                    <ul>
                        <li>new1</li>
                        <li>new2</li>
                        <li>new3</li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>new4</li>
                        <li>new5</li>
                        <li>new6</li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>new7</li>
                        <li>new8</li>
                        <li>new9</li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>new10</li>
                        <li>new11</li>
                        <li>new12</li>

                    </ul>
                </div>
                    <div>
                    <ul>
                        <li>new13</li>
                        <li>new14</li>
                        <li>new15</li>

                    </ul>
                </div>
            </div>
        </div>

CSS部分对HTML中的内容进行修饰：

<style type="text/css">
            *{margin: 0;padding: 0;}
            #box{width: 600px;background: #ccc;margin: 0 auto;}
            li{list-style: none;}
            #ul1{display: block; width: 100%;overflow: hidden;}
            #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
            #content{width: 100%;margin-top: 20px;}
            #content div{display: none;}
            #content div.active{display: block;}
            .show{background: red;}
        </style>

最后是最重要的JS部分：

<script type="text/javascript">
            window.onload=function(){
                var oli=document.getElementById("ul1").getElementsByTagName("li");
                //alert(oli.length);
                var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
                //alert(odiv.length)
                for(var i=0;i<oli.length;i++){
                    oli[i]._index=i;
                    oli[i].onclick=function(){
                        //alert(i);
                        for(i=0;i<oli.length;i++){

                            oli[i].className='';
                            odiv[i].style.display='none';
                        }
                        this.className='show';
                        odiv[this._index].style.display='block';
                    }

                }

            }
        </script>

JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分；因为I这个变量在下面的事件函数中无法访问到，所以每次点击时，i变量循环到oli.length值。因此将i的值交给一个我们自定义的元素属性上来保存循环中i的值，供下面使用。即：oli[i]._index=i;
添加点击函数后，第二个for循环是为了把所有的oli的className改为“空”和所有的odiv的style为display=’none’；循环结束后，在给当前点击的这个oli添加className和下面相应的odiv的style为display=’block’;

以下是运行的结果：
这里写图片描述
在编写程序时一定要注意，选项卡中的点击部分即：li的数量（JS里oli.length）要和下面ID为content的div里包含的div数量（JS里odiv.length）相同，我在编写程序时就因为oli.length与odiv.length不相等，导致程序报错，但是好长时间都找不到错误；总而言之还是要多多细心。

方法二：

方法一适用于选项卡比较少的情况，但如果选项卡内容较多时我们要用到这种方法，第二种方法运用到了这周我们老师讲的一个在JS种比较重要的知识点：自运行函数

(function a(){
    //函数里的内容            
            })(参数);

定义函数a();给整个函数带上括号，后面的括号为输入参数；

以下为方法二自运行函数的程序：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>多个tab选项卡</title>
        <script>
            window.onload = function() {
                tab("tabMain",  "click");
                tab("tabMain1", "click");
                tab("tabMain2", "click");
                tab("tabMain4", "click");

                 function tab(id, event) {
                var oDiv = document.getElementById(id);
                var oBtn = oDiv.getElementsByTagName("li");
                var oBox = oDiv.getElementsByTagName("div");
                for(var i = 0; i < oBtn.length; i++) {
                    //console.log(i)
                    (function(index) {//自执行函数
                        oBtn[index].addEventListener(event, function() {
                            for(var i = 0; i < oBtn.length; i++) {
                                oBtn[i].className = '';
                                oBox[i].className = 'tabSide';
                            }
                            this.className = 'active';
                            oBox[index].className = 'active';
                        });//添加事件监听
                    })(i)
                }
            }
            }


        </script>
        <style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .tabMenu {
                width: 300px;
                margin: 50px auto 0 auto;
            }

            .tabMenu ul {
                display: block;
                overflow: hidden;
                width: 300px;
                height: 40px;
                background: #eee;
            }

            .tabMenu ul li {
                cursor: pointer;
                display: block;
                float: left;
                width: 100px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
            }

            .tabMenu ul li.active {
                background: #f00;
                color: #fff;
            }

            .tabMenu .tabSide {
                display: none;
                padding: 10px;
                line-height: 20px;
                width: 278px;
                border: solid 1px #eee;
            }

            .tabMenu div.active {
                display: block;
                padding: 10px;
                line-height: 20px;
                width: 278px;
                border: solid 1px #eee;
            }
        </style>
    </head>

    <body>
        <div id="tabMain" class="tabMenu">
            <ul>
                <li class="active">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
            </ul>
            <div class="tabSide active">内容1</div>
            <div class="tabSide">内容2</div>
            <div class="tabSide">内容3</div>
        </div>
        <div id="tabMain1" class="tabMenu">
            <ul>
                <li class="active">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
            </ul>
            <div class="tabSide active">内容1</div>
            <div class="tabSide">内容2</div>
            <div class="tabSide">内容3</div>
        </div>
        <div id="tabMain2" class="tabMenu">
                <ul>
                <li class="active">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
            </ul>
            <div class="tabSide active">内容1</div>
            <div class="tabSide">内容2</div>
            <div class="tabSide">内容3</div>
        </div>
            <div id="tabMain4" class="tabMenu">
                <ul>
                <li class="active">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
            </ul>
            <div class="tabSide active">内容1</div>
            <div class="tabSide">内容2</div>
            <div class="tabSide">内容3</div>
        </div>
    </body>

</html>

和方法一相似先写HTML里的内容，CSS部分对HTML进行修饰，我们直接来看JS部分；

<script>
            window.onload = function() {
                tab("tabMain",  "click");
                tab("tabMain1", "click");
                tab("tabMain2", "click");
                tab("tabMain4", "click");

                 function tab(id, event) {
                var oDiv = document.getElementById(id);
                var oBtn = oDiv.getElementsByTagName("li");
                var oBox = oDiv.getElementsByTagName("div");
                for(var i = 0; i < oBtn.length; i++) {
                    //alert(i)；
                    (function(index) {//自执行函数
                        oBtn[index].addEventListener(event,      function() {
                            for(var i = 0; i < oBtn.length; i++) {
                                oBtn[i].className = '';
                                oBox[i].className = 'tabSide';
                            }
                            this.className = 'active';
                            oBox[index].className = 'active';
                        });//添加事件监听
                    })(i)
                }
            }
            }

        </script>

通过添加事件和自运行函数完成多个选项卡。
上周的博客，因为不熟悉markdown编辑器的脾气，所以做出来的东西比较不堪入目，这次我看了别人的博客加上自己的摸索，我惊奇的发现，，，，markdown编辑方式和前端的代码编辑方式很多都一样啊，激动地我简直控制不住我寄几（石乐至.gif），哈哈哈哈哈。

domunweb

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
用js语句实现网页中的选项卡（两种方法）

用js语句实现网页中的选项卡方法一：以下是全部的代码；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} #
复制链接

扫一扫