首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于JS实现网页中的选项卡（两种方法）

Posted in Javascript onJune 16, 2017

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

方法一：

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

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

通过添加事件和自运行函数完成多个选项卡。

基于JS实现网页中的选项卡（两种方法）

- Author -

domunweb

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

Javascript 相关文章推荐
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
angular ng-click防止重复提交实例
Jun 16 #Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 #Javascript
vue实现全选、反选功能
Nov 17 #Javascript
vue中将网页打印成pdf实例代码
Jun 15 #Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 #Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
3389(1) 线程池(1) systemctl(1) FTP(9) DHCP(2) 域控制器(1) 池化技术(1) Repository接口(3) Spring Data JPA(4) Ubuntu Server(6)
You might like
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
使用vue-cli（vue脚手架）快速搭建项目的方法
2018/05/21 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序转发事件实现解析
2019/10/22 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
实用自动化运维Python脚本分享
2018/06/04 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python实现多进程通信实例分析
2019/09/01 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
什么是托管函数？托管函数有什么用？
2014/06/15 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
银行简历自我评价
2014/02/11 职场文书
班训口号大全
2014/06/18 职场文书
森林防火标语
2014/06/23 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
撤诉申请怎么写
2015/05/19 职场文书
关于观后感的作文
2015/06/18 职场文书
中学图书馆工作总结
2015/08/11 职场文书
Python数据类型最全知识总结
2021/05/31 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫