<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.whole{ /*外面的大盒子可以不用设高,被里面上下的盒子撑出高*/
width:500px;
margin:100px auto;
border:1px solid black;
}
.shang{ /*上面的盒子同样不用设高,被放着的按钮撑出高度*/
width:%;
}
.xia div{ /*下面盒子里面放着的5个盒子需要设定每个盒子高度是多少,下面的盒子的高度就是这5个盒子的高度总和*/
width:%;
background-color: purple;
height:100px;
display:none; /*一开始这5个盒子都要隐藏,等点击相应的按钮的时候,才会显示*/
}
.purple{ /*类名是紫色,背景颜色是紫色*/
background-color: purple;
}
.xia .show{ /*这5个盒子的类名是show的时候,盒子会显示,
注意一定写为.xia .show ,不能只写.show 因为一开始需要第一个盒子显示而其他的盒子隐藏,只写.show权重比.xia div低,所有盒子的状态不论鼠标点击与否都不会显示*/
display:block;
}
</style>
<script> //js部分,点击tab栏中的第一个按钮,第一个按钮变成紫色,下方第一个盒子显示,其他盒子隐藏,点击第二个按钮,相应第二个按钮变成紫色,第二个盒子显示
window.onload=function()
{
var btns=document.getElementById("top").getElementsByTagName("button");
var divs=document.getElementById("bottom").getElementsByTagName("div");
for(var i=;i<btns.length;i++)
{
btns[i].index=i; //难点,一开始获得所点击按钮的索引号,根据这个索引号找到对应的盒子让其显示
btns[i].onclick=function()
{
for(var j=;j<btns.length;j++)
{
btns[j].className=""; //清空所有按钮的类名
}
this.className="purple"; for(var j=;j<divs.length;j++)
{
divs[j].className=""; //清空所有盒子的类名
}
divs[this.index].className="show"; //和当前点击按钮索引号相同的盒子显示出来
}
}
}
js部分代码简化
window.onload=function()
{ var btns = document.getElementById("top").getElementsByTagName("button"); var divs = document.getElementById("bottom").getElementsByTagName("div"); for (var i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onclick = function () { for(var i=0;i<btns.length;i++) { btns[i].className=""; divs[i].className=""; } this.className="purple"; divs[this.index].className="show"; } } }
</script>
</head>
<body>
<!--一个大盒子,里面有上下两个盒子,上面的盒子里面有5个按钮,下面的盒子里又装着5个小盒子-->
<div class="whole">
<div class="shang" id="top">
<button>第一个按钮</button>
<button>第二个按钮</button>
<button>第三个按钮</button>
<button>第四个按钮</button>
<button>第五个按钮</button>
</div>
<div class="xia" id="bottom">
<div class="show">第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
<div>第四个盒子</div>
<div>第五个盒子</div>
</div>
</div>
</body>
</html>

tab栏切换效果案例的更多相关文章

  1. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  2. tab栏切换效果运用案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 实现tab栏切换效果

    效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. tab栏切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. JavaScript--tab栏切换效果

    tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  7. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  8. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  9. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

随机推荐

  1. C++入门经典-例6.18-数组的动态分配,动态获得斐波那契数列

    1:有时在获得一定的信息之前,我们并不确定数组的大小.动态分配数组则可以使用变量作为数组的大小,使数组的大小符合我们的要求. 2:科普一下斐波纳契数列:斐波那契数列指的是这样一个数列 1, 1, 2, ...

  2. 使用Desktop App Converter打包桌面应用程序

    打包具有安装程序 (.msi) 的应用程序 DesktopAppConverter.exe -Installer C:\Installer\MyAppSetup.msi -Destination C: ...

  3. leetcode-easy-trees-102. Binary Tree Level Order Traversal-YES

    mycode  98.56% # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x ...

  4. P2118 比例简化

    P2118 比例简化 题解 这题考虑暴力枚举,枚举1~L的两个数 反正数据也很小 代码 #include<bits/stdc++.h> using namespace std; int a ...

  5. vue项目如何部署到Tomcat中

    vue项目如何部署到Tomcat中 1,假设你要访问的项目名称为'hms' 2,在Tomcat的webapps下创建hms文件夹, 3,配置config/index.js文件,build: {} 选项 ...

  6. 从 AVFrame 中取出帧(YUV)保存为 Mat 格式

    由于 cnblogs 不支持科学公式,完整内容请移步原文链接 原文地址:从 AVFrame 中取出帧(YUV)保存为 Mat 格式 从 AVFrame 中取出帧(YUV)保存为 Mat 格式 本文档针 ...

  7. sklearn.feature_extraction.DictVectorizer

    sklearn.feature_extraction.DictVectorizer:将字典组成的列表转换成向量.(将特征与值的映射字典组成的列表转换成向量) 1. 特征矩阵行代表数据,列代表特征,0表 ...

  8. Appium - multiprocessing.pool.MaybeEncodingError-【 “Can’t pickle local object ‘PoolManager.__init__.<locals>.<lambda>‘】

    公司同事学习自动化新装环境后,run多进程测试用例时出错: multiprocessing.pool.MaybeEncodingError: Error sending result: ’<ap ...

  9. Zookeeper 假死脑裂

    该问题就是服务集群因为网络震荡导致的多主多从问题,解决方案就是设置服务切换的超时时间,但也同时会导致无法达到高可用的要求.

  10. 前端,后端,UI,UE,UX,区别到底在哪里?

    前端后端,到低区别在哪里? 其实后端是负责更为复杂的数据逻辑,表处理结构,如何实现一连串的数据提交,包括,数据验证,数据影响,数据计算,数据提取,,,等等. 那么前端负责的是什么呢?数据展示,数据验证 ...