JS实现选项卡实例详解
作者：jingangel 发布时间：2024-04-19 10:43:37
标签：JS,选项卡
本文实例讲述了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写简单选项卡完整步骤
如图，最简单的纯粹的选项卡
第一步，当然是先写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程序设计有所帮助。
0
投稿猜你喜欢
- 这几天花了点时间,将把django开发好的web项目部署到Apache上，参考了官方的一些文档和互联网上的文档，还是花了比较多的时间，这里把
- 在 HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用 <textarea>
1.使用jobsName.ini文件保存要创建job的名字jobs1jobs2jobs32.使用Jenkins创建job时自动生成的conf- 由于工作需要，这两天在看GOOGLE MAP 的 API，需要在公司的网站上使用地图。今天把看过之后的一点使用方法，跟大家一起分享：演示地址
- MySQL 复制表详解如果我们需要完全的复制MySQL的数据表，包括表的结构，索引，默认值等。 如果仅仅使用CREATE TABLE ...
- 今天突然想起这个问题， 就好好搜索整理一下，不过在开始归纳之前，请先来一起做做这个小实验：忽略一切实际的外在情况， 你看了下面的按钮，第一本
- 1. 准备工作后台服务接口，对书本的增删改查操作2. 弹出窗口进入ElementUi官网， 找到Dialog对话框，可以参考&ldq
- 问题描述我在flask程序中，启动了另一个python程序-test.py：os.system('nohup python /opt
- 提起Apple，大部分人都会提起Apple的设计，除了Apple里拥有一批天才设计师外，还因为乔布斯对于设计有着苛刻的要求。所以在IT界，A
- 要求安装：1.Python2.7z解压软件backup_2.py# Filename: backup_2.py'''
- pydantic是一个Python的数据验证和转换库，它的特点是轻量、快速、可扩展、可配置。笔者常用的用于数据接口schema定义与检查。具
- 1 logging模块简介logging模块是Python内置的标准模块，主要用于输出运行日志，可以设置输出日志的等级、日志保存路径、日志文
- 一，mnist数据集形如上图的数字手写体就是mnist数据集。二，GAN原理(生成对抗网络)GAN网络一共由两部分组成：一个是伪造器(Gen
- Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid、Canvas、Rectangle、TextBloc
- 写在之前首先是写在之前的一些建议：首先是关于这本书，我真的认为他是将神经网络里非常棒的一本书，但你也需要注意，如果你真的想自己动手去实现，那
- 一级行政区经纬度一级行政区（省级行政区）：34个（23个省、5个自治区、4个直辖市、2个特别行政区）provinces = {
- 前言语音合成技术能将用户输入的文字，转换成流畅自然的语音输出，并且可以支持语速、音调、音量设置，打破传统文字式人机交互的方式，让人机沟通更自
- 本文实例为大家分享了python编写简单计算器的具体代码，供大家参考，具体内容如下做一个计算器，这是我们想要的效果。1、准备工作导入time
- 本博文源于绘图基础，主要讲解如何用python的plot绘制气温的折线图。先讲解plot参数如何使用后给出一个气温折线图样例绘制使用plot
- 最近几个不错网站被封，让人感觉很不爽，现在既不方便用，也不方便学习参考。正好想到曾经“截图”的事情，其实我认为互联网产品还有个特点，更新换代
