tab切换实现方式1
tab切换实现方式1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换回顾</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#wrap {
width: 600px;
margin: 100px auto 0;
overflow: hidden;
}
#tit {
height: 30px;
}
#tit span {
float: left;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
background: #ccc;
}
#tit span.select {
background: #333;
color: #ccc;
}
#con {
width: 560px;
padding: 20px;
overflow: hidden;
background: pink;
}
#con li {
height: 200px;
line-height: 200px;
text-align: center;
font-size: 100px;
display: none;
}
#con li.show {
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select">选项一</span>
<span>选项二</span>
<span>选项三</span>
</div>
<ul id="con">
<li class="show">1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</div>
<script>
var tit = document.getElementById('tit');
var con = document.getElementById('con');
var spans = tit.children;
var lis = con.children;
// console.log(lis.length);
for (var i = 0; i < spans.length; i++) {
spans[i].index = i;
spans[i].onclick = function() {
for (var i = 0; i < spans.length; i++) {
spans[i].className = '';
lis[i].className = '';
}
this.className = 'select';
lis[this.index].className = 'show';
}
}
</script>
</body>
</html>
tab切换实现方式1的更多相关文章
- tab切换实现方式2
tab切换实现方式2: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- javascript回车完美实现tab切换功能
javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...
- 很好用的Tab标签切换功能，延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...
- TabLayout：另一种Tab的实现方式
http://blog.csdn.NET/aigestudio/article/details/47155769 在5.0以前我们想要实现像网易新闻客户端那样的的Tab可以有很多种选择: 比如古老的T ...
随机推荐
- Redis学习-SortedSet
Sorted-Sets和Sets类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted-Sets中的每一个成员都会有一个分数(score)与之关联, ...
- ER模型的学习
(计应154兰家才)在建立表后开始了学习的第一步,了解数据库的基本知识,就以建立bbs论坛为标准学习er模型,首先建立了4个表分别是BBSReply,BBSSection,BBSTopic,BBSUs ...
- 使用redis做mybaties的二级缓存(2)-Mybatis 二级缓存小心使用
Mybatis默认对二级缓存是关闭的,一级缓存默认开启: 下面就说说为什么使用二级缓存需要注意: 二级缓存是建立在同一个namespace下的,如果对表的操作查询可能有多个namespace,那么得到 ...
- 浅谈 Java 主流开源类库解析 XML
在大型项目编码推进中,涉及到 XML 解析问题时,大多数程序员都不太会选用底层的解析方式直接编码. 主要存在编码复杂性.难扩展.难复用....,但如果你是 super 程序员或是一个人的项目,也不妨一 ...
- Maven学习（五）
使用Maven构建多模块项目 一般的web项目构成: 建立解决方案目录parent 首先使用命令进入到我们需要建立maven项目的目录: mvn archetype:generate -DgroupI ...
- .net Core1.0 邮件发送
今天一天早,公司需要将之前的.net Core项目增加一个预处理机制,就是当程序出现异常后给我们的开发人员发送邮件,因为今天写些关于.netCore上发送邮件. 根据查阅资料发现在目前的Core1.0 ...
- 多线程编程-- part 5.3 LockSupport
一.LockSupport的介绍 LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程 ...
- PHP实现记录日志（文件）
PHP实现记录日志(文件) php php 记录日志 项目中经常会记录些操作信息,或是打印些关键变量,或者是导入excel文件,提现记录,都需记录.经常遇到,封装一个方法,有不好的地方或补充请留言. ...
- D. 实验室传染病
D. 实验室传染病 题意 给出 n 个人的位置,以及每个人的传染范围,当一个人患病时,他的传染范围内(包括边界上)的人全部会被感染并继续向外传播. 求以每个人为传染源最多有多少人被感染. 分析 首先二 ...
- 一起学习java
一.Servlet学习 下面是Servlet一个整体的继承结构 首先说一下Servlet这个接口这个主要包含的有init,service,destroy等方法,这里主要介绍这3个 ...