tab栏切换效果案例
<!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栏切换效果案例的更多相关文章
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- tab栏切换效果运用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 实现tab栏切换效果
效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- tab栏切换效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript--tab栏切换效果
tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
随机推荐
- Static class 与non static class的区别
内部静态类不需要有指向外部类的引用.但非静态内部类需要持有对外部类的引用.非静态内部类能够访问外部类的静态和非静态成员.静态类不能访问外部类的非静态成员.他只能访问外部类的静态成员.一个非静态内部类不 ...
- Python对字典分别按键（key）和值（value）进行排序
使用sorted函数进行排序 sorted(iterable,key,reverse),sorted一共有iterable,key,reverse这三个参数;其中iterable表示可以迭代的对象,例 ...
- @RequestMapping注解学习
1.@RequestMapping注释用于映射url到控制器类或一个特定的处理程序方法.可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. 参考地址:https://ww ...
- T84341 Jelly的难题1
T84341 Jelly的难题1 题解 当窝发现窝的锅在读入这个矩阵的时候,窝..窝..窝.. 果然,一遇到和字符串有关的题就开始吹空调 好啦我们说说思路吧 BFS队列实现 拿出一个没有走过的点,扩展 ...
- C++ 操作符重载实践 & java没有重载操作符的思路
实践如下: #include <iostream> using namespace std; class Book{ private: int page; public: Book(int ...
- failed to create cublas handle: CUBLAS_STATUS_ALLOC_FAILED 错误解决方法
解决: config = tf.ConfigProto() config.gpu_options.allow_growth = True session = tf.Session(config=con ...
- 阶段3 2.Spring_06.Spring的新注解_4 spring的新注解-Import
把Configuration的直接先注释掉 那么运行测试类的查询所有 并不影响我们的使用 不写同样可以执行的原因是因为这里把SpringConfiguration这个类作为方法传入进去了 新建 Spr ...
- jdbc 对sqlite的基本操作
1.向数据库中创建表 public void addTable( String dbpath) { //创建表单的sql语句 String createtablesql= " CREATE ...
- dcef3 基本使用经验总结
dcef3 基本使用经验总结 https://www.cnblogs.com/h2285409/p/10517483.html 加载命令启动参数 --enable-system-flash 会加 ...
- zabbix 4.0版本
Zabbix 4.0 最高版本是4.2 1.什么是zabbix及优缺点(对比cacti和nagios) zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速 ...