js之选项卡

Posted Hero行者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之选项卡相关的知识,希望对你有一定的参考价值。

接触js也有几天了,今天研究了一下选项卡的编写,中间磕磕绊绊,好多疑问,不过经过百度等各渠道查找,解决了遇到的问题,也做出了想要的效果。下面我放上自己的代码,也说一下遇到的困惑以及解决的办法。
选项卡需求:

  1. 点击按钮背景色变色,其余按钮背景色回复默认样式;
  2. 点击按钮时,让下方盒子内容联动。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <link rel="icon" href="">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tab {
            position: relative;
            bottom: -1px;
            overflow: hidden;
        }
        .tab li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            text-align: center;
        }
        .box {
            clear: both;
            width: 500px;
            height: 500px;

        }
        .box li {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 500px;
            background: aquamarine;
            display: none;
        }
        .select {
            background: aquamarine;
            display: block !important;
        }
        .tab .select{
            border-bottom: none;
        }
    </style>
</head>
<body>
<ul class="tab">
    <li class="select">河南</li>
    <li>北京</li>
    <li>重庆</li>
    <li>天津</li>
    <li>山东</li>
</ul>
<ul class="box">
    <li class="select">烩面</li>
    <li>烤鸭</li>
    <li>小面</li>
    <li>狗不理</li>
    <li>煎饼</li>
</ul>
<script>
    var oTab = document.getElementsByClassName("tab");
    var oTabLis = oTab[0].getElementsByTagName("li");
    var oBox = document.getElementsByClassName("box");
    var oBoxLis = oBox[0].getElementsByTagName("li");

    function change(index) {  //index:给函数传入的一个形参,一个入口,实现方法的时候我们不知道用户点击哪一个li,设定一个入口,当用户点击需要页卡切换的时候,只要执行change这个方法,并把点击这个li的索引传递给我们,我们就可以在集合中通过索引获取当前点击的这个li对象
        for (var i = 0; i < oTabLis.length; i++) {
            oTabLis[i].className = ""; //让所有的li移除select样式类
            oBoxLis[i].className = "";
        }
       
        //让当前点击的li有选中的样式
        oTabLis[index].className = "select";
        oBoxLis[index].className = "select";
    }

     //给每一个li绑定点击事件,点击的时候执行change方法,把当前点击li的索引传递进来,实现页卡的切换。
    for (var i = 0; i < oTabLis.length; i++) {
        oTabLis[i].myIndex = i; //这个是我遇到最困惑的地方,我在下边详细说一下。这标记为a处吧
        oTabLis[i].onclick = function () {
            change(this.myIndex);
        }
    }
</script>
</body>
</html>

这里我说的都是a处的内容,也就是点击事件的部分。如果此处这样写:

  for (var i = 0; i < oTabLis.length; i++) {
      
        oTabLis[i].onclick = function () {
            change(i);
        }

乍一看,没有问题,但是你会发现运行不出来,这是什么情况呢?我们不妨控制台输出一下

 for (var i = 0; i < oTabLis.length; i++) {
      
        oTabLis[i].onclick = function () {
           // change(i);
              console.log(i);
        }

你会发现,不管点击哪一个li,输出的结果都是5,也就是此处的i并不是想象中点击的这个li的索引。这就很明显了,肯定是change(i)这里出现了问题。那么为什么出现这样的问题呢?
首先,我们要搞清楚,函数分为定义函数和执行函数,在这里给元素点击事件绑定方法,点击才执行,此处绑定属于创建函数,空间中存储的都是字符串:也就是说,这里的i不是变量,而是字符。因此有了下面的输出:

//第一轮
 oTabLis[0].onclick = function () {
              console.log(i);

//第二轮
 oTabLis[1].onclick = function () {
              console.log(i);
……
//第五轮
 oTabLis[5].onclick = function () {
              console.log(i);

//循环结束的时候,i=5

循环结束的时候,i的值是5。假设用户开始点击第二个li,开始执行第二个绑定方法(方法执行:形成一个新的作用域,把之前空间中存储的字符串转化为代码执行,console.log(i),但是此时输出的是循环结束时的5)。
所以我们用自定义属性,有了以下的代码:

   for (var i = 0; i < oTabLis.length; i++) {
        oTabLis[i].myIndex = i;//用来存储每次循环i的值
        oTabLis[i].onclick = function () {
            change(this.myIndex);//此处需要传递当前点击这个li的索引
           //this:当前点击的这个li
           //this.myIndex:当前点击这个li的myIndex这个自定义属性的值
        }
    }

i=0
 oTabLis[0].myIndex = 0;
i=1
 oTabLis[1].myIndex = 1;
i=2
 oTabLis[2].myIndex = 2;
i=3
 oTabLis[3].myIndex = 3;
i=4
 oTabLis[4].myIndex = 4;
//这里相当于给每个li添加了一个便签,方便取用。

以上就是我对选项卡的理解以及遇到的问题,如有表达错误的地方,请及时提出!




以上是关于js之选项卡的主要内容,如果未能解决你的问题,请参考以下文章

js之选项卡

从父片段到选项卡片段的接口侦听器不起作用

显示 ActionBar 选项卡的两个片段

Android - 一个选项卡中的多个片段

在具有多行标题的选项卡上设置片段

Android:如何在选项卡内从一个片段导航到另一个片段? [关闭]