<!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. react native iOS真机调试-联网问题与js严格模式

    rn:strict mode does not allow function declarations in a lexically nested statement https://blog.csd ...

  2. 014_matlab读取ecxel（直接导入）

    视频教程:https://v.qq.com/x/page/c3039b5htwx.html 资料下载:https://download.csdn.net/download/xiaoguoge11/12 ...

  3. vue的认识===下载

    VUE:不建议直接操作DOM Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微 胜出,并且它的热度还在递增 Vu ...

  4. ent 基本使用十六 聚合

    ent 提供了聚合处理 一个group by + 聚合的处理(age以及name字段) package main ​ import ( "context" ​ "< ...

  5. 信息学奥赛一本通 提高篇 序列第k个数 及 快速幂

    我是传送门 这个题首先是先判断是等差还是等比数列 等差的话非常简单: 前后两个数是等差的,举个栗子: 3 6 9 12 这几个数,(我感觉 1 2 3 4并说明不了什么) 每次都加3嘛,很容易看出,第 ...

  6. nginx之TCP反向代理

    实现Nginx tcp负载均衡 Nginx在1.9.0版本开始支持tcp模式的负载均衡,在1.9.13版本开始支持udp协议的负载,udp主要用于DNS的域名解析,其配置方式和指令和http 代理类似 ...

  7. DDD 全称 “Domain-Driven Design”，领域驱动设计

    大型软件项目的最复杂之处不是实现,而是软件所服务的真正的领域. 领域驱动设计就是用来处理这些高度复杂领域的理想和途径,使得领域本身成为项目关注的焦点,从而达到维护能深刻反映领域的软件模型的目的. 通过 ...

  8. js限制输入数字能输入小数点，js定义数组，js往数组中添加数据，js将字符型转为数字型，除法结果保留两位小数——js小测：计算比赛得分

    一个朋友跟我说要去给某个比赛算分: 规则:去掉最低分最高分求平均分: 最近在学习大数据可视化——图谱,用到js一些东西,所以今天就用js练练 用到知识点: js限制输入数字能输入小数点,js定义数组, ...

  9. UIAutomatorViewer、Inspector获取元素信息

    一.UIautomatorViewer 它是Android SDK的一个工具,如果安装了 Android SDK,就可以在cmd窗口直接输入uiautomatorviewer打开. 点击左上角的第二个 ...

  10. FZU Monthly-201905 tutorial

    FZU Monthly-201905 tutorial 题目(难度递增) easy easy-medium medium medium-hard hard 思维难度 AB H DG CE F A. C ...