选项卡案例

效果如下:(点击每一个选项卡,对应的div会随之跳转)

HTML部分:

注意:

1.<section>标签定义文档中的章节,标签等

2.想让哪一个li页卡和div内容显示选中状态,就让其具备active样式类(常规样式都是不选中的,默认给第一个li和div设置active,默认只有第一个选中)

3.li标签或者div后面带有"active"代表此时当前选项卡活动着的页面

4.一个li标签对应着一个div标签,比如编程----编程使我快乐

CSS部分:

1.将整个盒子居中

2.设置li标签的样式

cursor: pointer;规定所显示的光标类型-光标呈现为一只手

让li标签在同一行显示方法:

方法1:float: left;有缺点:浮动的元素脱离了文档流,导致父元素的高度不被撑开,解决方法:

            .tabBox .tab::after{

                display: block;

                content: '';

                clear: both;

            }

方法2:display: inline-block; 

display: inline-block;会把元素之间的空格/换行当做文本,占据一定的位置,导致元素之间会产生间隙 

清除空格,把多个li标签放在同一行,或者给他的父元素设置:font-size: 0; 

3.设置对应的div

display:none;先让div隐藏 

1,2,3步骤会出现的问题:

问题1:li标签的下边框和下面的div上边框会发生冲突

解决方法:

position: relative; 相对定位,相对于之前的位置进行移动

top:1px    top代表将整个ul向下移动1像素,top-代表向下 bottom-代表向上

问题2:li标签的问题(点击后的颜色与div不匹配以及li标签的下边框与div不匹配)

解决方法:

问题3:让活动的div显示 

方法:

script部分:

获取对应的id,根据存储的id变量获取li标签和div标签

因为获取到的li标签是一个HTMLCollection(一个类数组),所以可以根据对应下表执行不同的函数:

思路:

点击,tabBox的li中的任意一个,都让当前点击的这个li和其对应的div有选中的样式(class='active'),因为只能同时选中一个,所以还需要让除点击这个li以外的li和对应的div都移除active选中的样式

=> 换一个思路:点击某一个li,我先让所有的li和div都移除选中的样式,接着让当前点击的li和div有选中的样式

      1.想要操作谁,就先获取谁

      2.事件绑定

      3.实现点击li要处理的事情

方法1:

方法2:

方法1中有重复的代码,我们把其进行提取,创建函数

tabList[0].onclick = function(){

set(0);

} 

tabList[1].onclick = function(){

set(1);

} 

tabList[2].onclick = function(){

set(2);

} 

方法3:

 

方法4:使用自定义属性

基于自定义属性解决方案的实现,在之前的某个阶段,把一些信息当做自定义属性赋值给元素对象,

到后期,需要用到这些值的时候,我们从自定义属性中获取到即可

为什么不能这样?

因为此处是创建函数,函数存储的是一堆字符串,我们看到的i也只是一个字符,i的结果永远是3