<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab选项卡</title>
<style>
* {
margin:0 auto;
padding:0 auto;
}
.tabBox {
margin: 20px auto;
width:500px;
}
.tabBox ul {
position:relative;
top:1px;
right:40px;
/* 相对于之前的位置向下移动1px,使边框重合 */
}
.tabBox ul li {
display: inline-block;
/* 同一行，块标签 */
margin-right:10px;
padding:0 10px;
line-height: 33px;
border:1px solid #AAA;
cursor: pointer;
}
.tabBox ul li.active {
color:lightcoral;
font-weight:bold;
border-bottom-color:#fff;
/* 当前li的边框覆盖率div的边框，我们让li的下边框为背景颜色白色，这样看上去就像没边框 */
}
.tabBox div {
display: none;
line-height: 148px;
text-align: center;
border:1px solid #AAA;
}
.tabBox div.active {
display: block;
/* div .active加空格是后代筛选，先搜索div在div中筛选，div .active不加空格当前div标签的二次筛选，同级筛选 */
}
</style>
</head>
<body>
<!-- div.tabBox#tabBox>(ul>li*3)+(div*3) [Tab]在括号前按下Tab键多行添加标签 -->
<!-- 整体大盒子 -->
<div class="tabBox" id="tabBox">
<!-- 上面三个tab签 -->
<ul>
<li class="active">新闻</li>
<li>音乐</li>
<li>电影</li>
</ul>
<!-- tab对应切换的内容 -->
<div class="active">金三胖访华</div>
<div>需要你陪</div>
<div>复仇者联盟</div>
</div>
<script>
// 思路：1.给所以的ul绑定点击事件，当点击任何一个li的时候，都做第二步操作
// 2.可以先让所以的li && div的class都为空（xxx.className=''）, 再让当前点击的这个li和对应的div有className这个样式类即可
//获取id为tabBox的所有li和div
var tabBox = document.getElementById('tabBox');
var tabList = tabBox.getElementsByTagName('li');
var divList = tabBox.getElementsByTagName('div');
//重复操作用循环
//=>自定义属性方式
for (var i = 0; i < tabList.length; i++) {
//=>每一轮循环的时候，给每一个li设置一个自定义属性‘zzzz’,存储的值是各自的索引
// TAB-List
// {
// 0:{zzzIndex:0,...},
// 1:{zzzIndex:1,...},
// 2:{zzzIndex:2,...},
// length:3
// }
tabList[i]['zfIndex'] = i ;
console.dir(tabList)
tabList[i].onclick = function() {
//this:代表的是当前点击的这个li
changeTab(this.zfIndex); //=>需要索引
}
}
//*不行的代码
// for (var i = 0; i < tabList.length; i++) {
// // tabList[i] 每一轮循环当前要操作的li对象，i是变量索引
// tabList[i].onclick = function() {
// //=>给当前元素某一个事件绑定一个方法，绑定的时候方法没有执行（属于创建）当在页面中手动触发点击事件的时候绑定的方法就会执行
// // i=0 tabList[0].onclick=function..
// // i=1 tabList[1].onclick=function...
// // i=2 tabList[2].onclick=function...
// alert(i);
// changeTab(i);//=>需要把当前点击的这个li的索引传递进来
// //分析：第一次循环
// // i=0 tabList[0].onclick = function (){
// // "changeTab(i);"
// // };
// // i++ 第二次循环
// // i=1 i=0 tabList[1].onclick = function (){
// // "changeTab(i);"
// // };
// // i++ 第三次循环
// // i=2 i=0 tabList[2].onclick = function (){
// // "changeTab(i);"
// // };
// // i++
// // i=3 循环结束
// }
 
// }
//=>第二中不用循环的方法
// tabList[0].onclick = function (){
// changeTab(0);
// }
// tabList[1].onclick = function (){
// changeTab(1);
// }
// tabList[2].onclick = function (){
// changeTab(2);
// }
//=>封装一个方法完成页卡切换
function changeTab(n){
//=>n:形参变量，当执行这个方法的时候，会把当前点击的这个li的索引传递过来
//=>1.清空所有选中样式
for (var i = 0 ; i < tabList.length; i++){
tabList[i].className = '';
divList[i].className = '';
}
//=>2.当前点击的有选中样式
tabList[n].className='active';
divList[n].className='active';
}
</script>
</body>
</html>

HTML系列：css3选项卡的更多相关文章

  1. CSS3——选项卡切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. xmlplus 组件设计系列之五 - 选项卡

    这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为 ...

  3. 纯CSS3完成选项卡，不要js完成的选项卡

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天就来敲一敲,选项卡,注意哦,不是一般利用js完成的选项卡,今天是纯用HTML和CSS来完成的,这怎么可能?那你不用js的点击事件,怎么处理? ...

  4. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  5. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  6. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  7. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  8. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  9. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

随机推荐

  1. tomcat和apache的区别--http server vs application server

    1. Apache是web服务器,Tomcat是应用(java)服务器,它只是一个servlet容器,是Apache的扩展. 2. Apache和Tomcat都可以做为独立的web服务器来运行,但是A ...

  2. 牛客OI周赛10-普及组-A眼花缭乱的街市-（加速+二分）

    https://ac.nowcoder.com/acm/contest/901/A 很简单的一道题,全场只有20+AC,卡时间.新学了cin加速语法和数组二分查找的函数调用. 知道有个读写挂,可以加速 ...

  3. keepalived是什么及作用?

    参考:https://www.cnblogs.com/hqjy/p/7615439.html keepalived介绍 keepalived观察其名可知,保持存活,在网络里面就是保持在线了, 也就是所 ...

  4. re.sub 实现多处替换

    1   | 表示或的意思 将所有字母替换掉 result_content = re.sub('a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z', ...

  5. 关于单片机的RAM

    一块RAM 分为了 堆 和 栈   名词而已,知道就可以了, 各种内存溢出问题: 全局数组访问越界 出现的问题:直接重启,或者死机 解决办法 :  额,写好自己的程序吧!!!!!!! 函数的局部变量过 ...

  6. openjudge1.1

    目录 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.1.8 1.1.9 1.1.10 1.1.1 描述 对于大部分编程语言来说,编写一个能够输出"H ...

  7. GoCN每日新闻(2019-11-05)

    GoCN每日新闻(2019-11-05) GoCN每日新闻(2019-11-05) 1. Protobuf 终极教程 https://colobu.com/2019/10/03/protobuf-ul ...

  8. nginx return配置说明

    该指令一般用于对请求的客户端直接返回响应状态码.在该作用域内return后面的所有nginx配置都是无效的. 可以使用在server.location以及if配置中. 除了支持跟状态码,还可以跟字符串 ...

  9. R 语言输入输出 读取命令函参数

    输入数据 使用键盘输入数据 只能处理小样本,很少使用 在创建 data.txt 字符串之后,用函数 read.table() 创建数据框 data.1.这种方法可以让我们把数据嵌入到R代码中,此处切记 ...

  10. 冰多多团队-第九次Scrum例会

    冰多多团队-第九次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 zpj debug, IAT debug, IAT 牛雅哲 debug, IAT 接通新的语音识别接口和termux,完成 ...