js实现简单的可切换选项卡效果
作者：jingangel 发布时间：2024-04-22 13:05:56
标签：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程序设计有所帮助。
0
投稿猜你喜欢
- django提供文件下载时，若果文件较小，解决办法是先将要传送的内容全生成在内存中，然后再一次性传入Response对象中：def simp
用Matplotlib画三维图最基本的三维图是由(x, y, z)三维坐标点构成的线图与散点图，可以用ax.plot3D和ax.scatte- 1. PHP入侵检测系统PHP IDS(即PHP-入侵检测系统)是一套易于使用、结构良好、速度出色且专门面向PHP类Web应用程序的先进安全
- 1.python安装包下载路径：https://www.python.org/downloads/2我下载安装包路径：https://www
- 数据挖掘的过程中，数据进行处理是一重要的环节，我们往往会将其封装成一个方法，而有的时候这一个方法可能会被反复调用，每一次都对数据进行处理这将
- 引言本篇文章记录仿写一个el-collapse组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学
- TO_NUMBER(char[,'format_model']) 字符转换到数字类型TO_DATE(char[,'f
- 就前面所讲，函数的基本内容已经完毕。但是，函数还有很多值得不断玩味的细节。这里进行阐述。参数的传递python中函数的参数通过赋值的方式来传
- 需要在 ~/.pip/pip.conf 配置文件中加入下面的语句，避免这类警告：没有目录或没有配置文件需要自己新建mkdir ~/.pip/
- 注：使用的是Python2.7。一、实例方法实例方法就是类的实例能够使用的方法。如下：class Foo:
- 效果图：搜索分类2种情况，一般的是当用户输入完，点击确定的按钮在向后发送请求，还有一种就是的我一边输入，一边向后台发送请求，但是会产生一个性
- 简介mplcursors包也可以为matplotlib提供交互式的数据光标（弹出式注释框），它的灵感来源于mpldatacursor包，可以
- 1.sonarqube是一款代码分析的工具，通过soanrScanner扫描后的数据传递给sonarqube进行分析2.sonarqube社
- 1. torch.utils.data.Datasetdatasets这是一个pytorch定义的dataset的源码集合。下面是一个自定义
- nn.Module中定义参数：不需要加cuda，可以求导，反向传播class BiFPN(nn.Module): def __i
- 一、简介Python：英 -[‘paɪθ ə n]或[‘paɪθɑn] 89年诞生 可用于软件开发：游戏后台、搜索、图形界面，网站，C\S（
- python虽然是一门'慢语言'，但是也有着比较多的性能检测工具来帮助我们优化程序的运行效率。这里总结了五个比较好的pyth
- 什么是协程协程（Coroutine）是一种比线程更加轻量级的并发方式，它不需要线程上下文切换的开销，可以在单线程中实现并发。协程通常具有以下
- 设计是一个输入-输出的过程，因为首先有用户的需求，客户的项目才有设计的产生，设计是带有目的性和市场行为的，当然也有一部分的创造性设计，仅仅为
- 本文实例讲述了Python基于pygame实现的font游戏字体。分享给大家供大家参考，具体如下：在pygame游戏开发中，一个友好的UI中
