首页
所有分类
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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
写出更好的JavaScript程序之undefined篇（中）
Nov 23 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
ES6的解构赋值实例详解
May 06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
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
德劲1102(1) GF515(1) 上海永华(1) 德劲1107(1) YH-R296(1) 安健(1) SRF-M100(1) SRF-22W(1) 华普R-96(1) A254(1)
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
js 字符串操作函数
2009/07/25 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
解析Python3中的Import
2019/10/13 Python
Sofft鞋官网：世界知名鞋类品牌
2017/03/28 全球购物
美国在线精品家居网站：Burke Decor
2017/04/12 全球购物
八年级历史教学反思
2014/01/10 职场文书
工作失职检讨书范文
2014/01/16 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年共青团工作总结
2014/12/10 职场文书
最新农村养殖致富：资金投入较低的创业项目有哪些？
2019/09/26 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
MySQL 数据库范式化设计理论
2022/04/22 MySQL