首页
所有分类
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 相关文章推荐
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
vue插件实现v-model功能
Sep 10 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
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
匹配文本(1) 柱状图(1) flex-shrink(1) 验证码(1) GNN(1) 文字识别(1) GCN(1) Pytesseract(1) 追加文本(1) SFTP(3)
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
Convert Seconds To Hours
2007/06/16 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
神奇！js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
vue-resource 拦截器（interceptor）的使用详解
2017/07/04 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
用js实现放大镜效果
2020/10/28 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python版DDOS攻击脚本
2019/06/12 Python
python yield和Generator函数用法详解
2020/02/10 Python
python TCP包注入方式
2020/05/05 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
python 利用toapi库自动生成api
2020/10/19 Python
HTML5 对各个标签的定义与规定：body的介绍
2012/06/21 HTML / CSS
kmart凯马特官网：美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
优秀员工评语
2014/02/10 职场文书
班级标语大全
2014/06/21 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
大学生党员自我评价
2015/03/04 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers