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使用认证密码登录
Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis的认证密码,增加Redis服务器的安 ...
- vue动态加载图片，取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- python 列表、元组、字符串、字典、集合、return等梳理
有必要对这些数据类型及操作做下梳理: 1.列表:增删改查 a.查找: >>> names=["zhang","wang","li&q ...
- .net 企业管理系统快熟搭建框架
简言 本人在博客园注册也2年多了,一直没有写自己的博客,因为才疏学浅一直跟着园子里的大哥们学习这.net技术.一年之前跳槽到现在的公司工作,由于公司没有自己一套的开发框架,每次都要重新 ...
- Java源码学习 -- java.lang.String
java.lang.String是使用频率非常高的类.要想更好的使用java.lang.String类,了解其源代码实现是非常有必要的.由java.lang.String,自然联想到java.lang ...
- PHP中的函数声明与使用
函数 1. 函数名是标识符之一,只能有字母数字下划线,开头不能是数字: 函数名的命名,必须符合&quo ...
- 【Android】又一个Gank客户端来啦
介绍 Gank平台的移动端又来了,非常感谢Gank平台开放接口,让我们这些小白有机会练手.学习. 本项目在架构方面有稍微花点心思,虽然还是最简单的MVC模式,但基本参考MVP的思想,Activity只 ...
- 01--数据库MySQL：【数据库DB】和【数据库管理系统DBMS】 简介
1.数据库DB 数据库:DB(DataBase) 按照一定规则存储在计算机的内部存储设备上被各种用户或者应用共享的数据集合 2.数据库管理系统DBMS 1)数据库管理系统DBMS:DBMS(DataB ...
- Eclipse用法：自动生成get和set方法
方法一 Java的类中,除了常量声明为静态且公有的,一般的对象数据作用域,都是声明为私有的.这样做能保护对象的属性不会被随意改变,调试的时候也会方便很多:在类的公有方法中大一个调用栈就能看到哪里改 ...
- 腾讯AlloyTeam发布AlloyLever - 开发调试发布错误监控上报用户问题定位尽在1kb代码
AlloyLever [官网][Giuhub] 1kb(gzip)代码搞定开发调试发布,错误监控上报,用户问题定位. 支持错误监控和上报 支持 vConsole错误展示 支持开发阶段使用 vConso ...