<!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. Game-Based Learning Is Changing How We Teach. Here's Why.

    https://www.edsurge.com/news/2019-02-04-game-based-learning-is-changing-how-we-teach-here-s-why This ...

  2. 用插件maven-surefire-report-plugin生成html格式测试报告

    在默认情况下,执行maven test/maven package/maven install命令时会在target/surefire-reports目录下生成txt和xml格式的输出信息. 其实ma ...

  3. 开源项目(5-1) yolo万能检测识别

    (1)Windows10+YOLOV3+VisualStudio2017最新版本超详细过程 https://blog.csdn.net/KID_yuan/article/details/8838026 ...

  4. [Git] --amend

    Change a Commit Message that Hasn't Been Pushed Yet If you make a mistake in a commit message but HA ...

  5. LeetCode 737. Sentence Similarity II

    原题链接在这里:https://leetcode.com/problems/sentence-similarity-ii/ 题目: Given two sentences words1, words2 ...

  6. BZOJ 1802: [Ahoi2009]checker

    题目描述 若有两个红格相邻 第一问的答案为0,所有位置上的棋子都可以通过在这两个格子上放棋子得到 第二设f[i]表示想让第i个格子上有棋子需要放的棋子数 若没有,第一问答案为偶数格子上白格的个数,第二 ...

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

    GoCN每日新闻(2019-11-02) GoCN每日新闻(2019-11-02) 1. Go 1.13.4 and Go 1.12.13 are released https://groups.go ...

  8. Map、Set、List是否有序

    首先我们应该清楚这个概念:这里的有序和无序不是指集合中的排序,而是是否按照元素添加的顺序来存储对象. list是按照元素的添加顺序来存储对象的,因此是有序的.他的实现类ArrayList.Linked ...

  9. Vue中使用Sass全局变量

    前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...

  10. 【PHP】php实现二进制、八进制、十进制、十六进制之间各自转换的函数

    <?php /* 常见的进制: 二进制 binary -----> bin 八进制 octal -----> oct 十进制 decimal -----> dec 十六进制 h ...