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

JS实现选项卡实例详解

Posted in Javascript onNovember 17, 2015

本文实例讲述了JS实现选项卡的方法。分享给大家供大家参考，具体如下：

思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。

注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。

HTML代码：

<div id="box">
 <input type="button" value="1" />
 <input type="button" value="2" />
 <input type="button" value="3" />
 <input type="button" value="4" />
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

JS代码：

<script>
 window.onload=function(){
  var box=document.getElementById('box');
  var input=box.getElementsByTagName('input');
  var div=box..getElementsByTagName('div');
  for(var i=0;i<input.length;i++){ //循环历遍onclick事件
   input[i].index=i; //input[0].index=0 index是自定义属性
   input[i].onclick=function(){
    for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏
     input[i].className='';
     div[i].style.display='none';
    };
    this.className='active'; //当前按钮添加样式
    div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的
   };
  };
  };
</script>

补充：用js写简单选项卡完整步骤

如图，最简单的纯粹的选项卡

JS实现选项卡实例详解

第一步，当然是先写html代码和css样式

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第二步，实现简单的切换效果

要点1：abc.document.getElementsByTagName("li")：取得abc下面的所有标签为li的元素，返回的是一个元素集合，有数组的一些属性。

要点2：循环，先循环给li加上onclick事件，再onlink事件点击的时候，再循环让所有选项卡的act样式去掉，所有的内容隐藏。然后让所点击的选项及对应内容显示。

要点3：tab_t_li[i].index = i; 在循环时，给选项卡加一个额外的属性并赋值，以做选项卡和内容的对应。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第三步，写成函数。上面的写法只能一个页面用一个选项卡，如果再加一个的话，就需要复制一份，再改很多变量名。

要点：tab_t_li[i][evt] 因为传值的时候是字符串，如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的，tab_t_li["onclick"]这样执行没问题。

好了，现在一个页面上就可以有多个切换了，只需要调用函数的时候，写上相应的id名和标签名，事件名称就可以了

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现选项卡实例详解

- Author -

jingangel

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

Javascript 相关文章推荐
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
JS排序方法（sort，bubble，select，insert）代码汇总
Jan 30 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
使用JS动态显示文本
Sep 09 Javascript
React中的render何时执行过程
Apr 13 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
js重写alert事件（避免alert弹框标题出现网址）
Dec 04 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 #Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 #Javascript
Jquery easyui 实现动态树
Nov 17 #Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 #Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 #Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
磁盘分区(1) DBLink(1) IIS7(1) FTP服务器(1) 粒子对撞机(1) 事务并发(1) DNS服务器(2) .NET Framework(2) GZIP(2) 界面设计(1)
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
javascript实现视频弹幕效果（两个版本）
2019/11/28 Javascript
Python实现程序判断季节的代码示例
2019/01/28 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python十进制转二进制的详解
2020/02/07 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Html5原创俄罗斯方块（基于canvas）
2019/01/07 HTML / CSS
个人优缺点自我评价
2014/01/27 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年民政工作总结
2014/11/26 职场文书
竞聘演讲报告：基本写作有哪些？附开头范文
2019/10/16 职场文书