<!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. 函数式编程：面向monad和pipeline编程

    将平凡对象转化为monand对象: 将monand对象串联起来进行业务处理.

  3. win10怎么查看当前用户账号

    https://jingyan.baidu.com/article/9225544679ab37851648f489.html

  4. ImageMagick 的安装及使用

    一.什么是Imagemagick? ImageMagick是一款免费开源的图片编辑软件.既可以通过命令行使用,也可以通过C/C++.Perl.Java.PHP.Python或Ruby调用库编程来完成. ...

  5. python--面向对象编程之学生选课系统练习

    1.系统目录结构 文件夹注解: bin--系统管理员和学生的主程序代码 config--系统的配置文件 db--系统的数据文件 admin--管理员的数据文件 student--学生的数据文件 lib ...

  6. Event 事件(最简单实用)

    public partial class Form1 : Form { /// <summary> /// 定义事件 /// </summary> public event E ...

  7. js Map的使用

    setExpenseAndAmountSum: function() { var detailList = vehicleVueObj.vehicleData; var expenseAmountSu ...

  8. OpenCV2 与opencv3 问题解决

    本文链接:https://blog.csdn.net/ling_xiobai/article/details/79691785今天使用opencv运行一个脚本,但是出现cv2.cv.BoxPoints ...

  9. [oracle/java/sql]用于上十万批量数据插入Oracle表的Java程序

    程序下载:https://files.cnblogs.com/files/xiandedanteng/LeftInnerNotExist20191222.rar 原理:Oracle的Insert al ...

  10. RunTime.getRunTime().addShutdownHook的用法

    今天在阅读Tomcat源码的时候,catalina这个类中使用了下边的代码,不是很了解,所以google了一下,然后测试下方法,Tomcat中的相关代码如下: Runtime.getRuntime() ...