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 ...
随机推荐
- 每天一道Java题[2]
问题 可以直接根据hashCode()方法产生的值判断两个对象是否相等吗? 解答 不能!根据Wikipedia(https://en.wikipedia.org/wiki/Java_hashCode( ...
- 控制器controller与指令中的link、controller中变量作用域的关系
angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...
- GD库知识点
GD库:PHP的一个扩展库,主要用于绘制动态图,根据数据动态响应的图片 如统计图 验证码 其他的用途如:处理已有图像 图片的缩放 裁剪 图片水印 文字水印 1.安装GD库 2.画图步骤:创建背景图像( ...
- Java基础知识二次学习--第六章 常用类
第六章 常用类 时间:2017年4月26日16:14:49~2017年4月26日16:56:02 章节:06章_01节~06章_06节 视频长度:20:57+1:15+8:44+1:26+11:2 ...
- 8.Java 加解密技术系列之 PBE
Java 加解密技术系列之 PBE 序 概念 原理 代码实现 结束语 序 前 边的几篇文章,已经讲了几个对称加密的算法了,今天这篇文章再介绍最后一种对称加密算法 — — PBE,这种加密算法,对我的认 ...
- mysql变量使用总结(转)
set语句的学习: 使用select定义用户变量的实践将如下语句改成select的形式: set @VAR=(select sum(amount) from penalties);我的修改: sele ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- Lesser known dplyr tricks
In this blog post I share some lesser-known (at least I believe they are) tricks that use mainly fun ...
- SurfaceView的基本使用
一.引入: Android提供了View来进行绘图处理,在大部分情况下,View都能满足绘图需求.大家都知道View是通过刷新来重绘视图,Android系统通过发出VSYNC信号来进行屏幕的重绘,刷新 ...
- 关于控制下拉框只读的js控制
文本框有readonly属性,直接设置:下拉框没有readonly属性,也不能通过其他属性进行只读的设置,下拉框只有disabled属性,但是这个属性设成true之后,值就获取不到了: 我在网上搜了一 ...