• js制作选项卡：实现点击选项卡会跳转到相应的页面

  ---

  1、制作简易选项卡（只制作开头） 

  目标：点击“正在播出”css样式就到了它身上，而“即将上映”没有样式；同样当点击“即将上映”样式就转换到它这里来了

  重点思路：给两个标签都绑上点击事件，先将class选择器选择的属性写好，然后通过classList给标签增加这个类名或者移除这个类名来控制。

  具体的代码思路是：先写好class选择器样式：见“.active{}”，然后第一个li标签点击事件要执行的代码是：当点击“正在播出”，它增加“active”这个类名，赋予属性，然后移除另一个item2的“active”属性；当点击item2时，给item2增加“active”属性，删除item1的“active”属性。

  核心代码：画红圈的那个

  

  完整代码： 

  DOCTYPE html>
      
      
      
      
      
      
          
  正在播出

• 即将上映

效果：

 

2、制作难度选项卡（切换header部分的选项body部分也能跟着切换）

目标：制作像QQ那样，点击“首页”就会首页出现样式而且跳转到首页，点击“我的”就会跳转我的那个界面

代码：

DOCTYPE html>
    
    
    
    
    
    
    
        
1

效果：在观察上面的“1 2 3 4”时，同时关注下面的青绿色上面文字的变化，随着上面的点击下面也也会跟着变，这就达到了我们想要的效果：点击一个选项，就会转到这个选项页面来，点击下一个选项，就会转到下一个对应的页面上来，例如：QQ的最下面的选项卡“首页、联系人、我的”。

重点思路：先讲第一个ul标签，首先是要获取到标签，然后给选择卡增加点击事件，因为选项卡（指的是header部分的1,2,3,4）比较多，所以我们用for循环的方式给每一个li标签增加点击事件，然后清除其他所有li标签的“active”属性，当点击哪个标签时，给它加上“active”，但是我们不知道当前点击的是哪个标签，所以给这些li标签增加一个自定义属性，就是给他们编号，获取当前属性值用到了：this这个方法，然后用这个方法获取当前点击的是第几个标签，也就是获取这个编号，再给当前这个li标签加上“active”属性。第二个ul标签也就是选项卡下面的页面部分，刚开始设置它们隐藏（display：none；），获取到谁，谁就加上“active”样式显现出来。

代码解析：

1、首先你要操作标签肯定要获取这个标签（li标签），上面就是获取标签的方法

2、循环给第一个ul里面的li标签添加点击事件：onclick；handler函数在下面定义

注意：console.log(i): 这里一定很多人说想知道li标签是第几个，打印一个这个“i”不就可以了吗，错，如果你在这里打印了“i”结果会一直是4，不会说你循环一次打印个1，循环第二次打印个2，原因是这个循环是执行的非常快的，当你还没开始点击呢，这个循环就执行完了，所以最后的结果一定只有4。所以这里我们用给li标签增加自定义属性的方式配合this方法来获取他们的编号。

增加定义属性：

配合this获取当前li标签的序号

接着讲下面页面内容怎么切换的：

和选项卡一个思路，就是将所有的li标签去掉“active”样式，获取到谁谁就呈现出来（刚开始它们都是隐藏的）， 

 

想了解：classList：remove（）用法的请见：

DOM操作元素类名：“.className”、“classList”的用法_陌一一的博客-CSDN博客

 想了解dataset用法的请见：

DOM操作元素属性：setAttribute、getAttribute、removeAttribute、dataset的用法_陌一一的博客-CSDN博客