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程序设计有所帮助。

Javascript 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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
You might like
php 更新数据库中断的解决方法
2009/06/05 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
jquery实现简单自动轮播图效果
2020/07/29 jQuery
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
linux系统都有哪些运行级别
2012/04/15 面试题
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
上课说话检讨书500字
2014/11/01 职场文书
财务会计实训报告
2014/11/05 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
Python基础之数据结构详解
2021/04/28 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs