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 ...
随机推荐
- carryLess开发日记_2017-05-18
1.接上一篇的form表单的ajax问题,上一篇中的form表单的ajax提交不能上传文件,所以采用了formData的方式上传 1)前段代码如下: <form action="&qu ...
- Selenium 高阶应用之WebDriverWait 和 expected_conditions
Seleniium 是相当不错的一个第三方测试框架,可惜目前国内已经无法访问其官网(FQ可以). 不知道大家是否有认真查看过selenium 的api,我是有认真学习过的.selenium 的api中 ...
- 机器学习：Python实现聚类算法(一)之AP算法
1.算法简介 AP(Affinity Propagation)通常被翻译为近邻传播算法或者亲和力传播算法,是在2007年的Science杂志上提出的一种新的聚类算法.AP算法的基本思想是将全部数据点都 ...
- WebApi2 文件图片上传下载
Asp.Net Framework webapi2 文件上传与下载 前端界面采用Ajax的方式执行 一.项目结构 1.App_Start配置了跨域访问,以免请求时候因跨域问题不能提交.具体的跨域配置方 ...
- R + ggplot2 Graph Catalog（转）
Joanna Zhao’s and Jenny Bryan’s R graph catalog is meant to be a complement to the physical book,Cre ...
- python_day5--->递归函数,二分法查找
li = [1, 5, 6, 7, 12, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]def er(num,li): if len(li) ==0: ...
- React 读书笔记
序言: 领导安排部门同事本月内看一本跟自己职业相关的书籍, 根基类的书籍已经看过了,重复阅读的意义不大,所以我平时看的都是视频,也许是视频作者没有出书的条件,也许是现在出书看的人越来越少了,也许有其他 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
- JavaSE教程-03Java中分支语句与四种进制转换
一.分支语句 计算机源于生活,程序模拟现实生活,从而服务生活 行为模式 1,起床,刷牙,洗脸,吃早餐,上课,回家,睡觉(顺序性) 2,如果时间不太够,打个滴滴快车,如果时间够,坐个地铁(选择性) 3, ...
- Common.Logging源码解析二
Common.Logging源码解析一分析了LogManager主入口的整个逻辑,其中第二步生成日志实例工厂类接口分析的很模糊,本随笔将会详细讲解整个日志实例工厂类接口的生成过程! (1).关于如何生 ...