绑定函数

最新推荐文章于 2022-12-13 16:23:27 发布

Tigerless

最新推荐文章于 2022-12-13 16:23:27 发布

阅读量530

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Tigerless/article/details/82530822

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javascript:

window.onload = function () {
    var mytabs = document.getElementsByClassName("body3_item");
    var mytab = mytabs[0].getElementsByTagName("div");
    console.log(mytab.length)

    for(var i = 0;i<mytab.length;i++){
        mytab[i].getElementsByTagName("a")[0].indexs = i;
        mytab[i].getElementsByTagName("a")[0].onclick = function () {
            for(var j = 0;j<mytab.length;j++){
                mytab[j].className = "publication_button";
            }
            mytab[this.indexs].className = "body3_get";
        }
    }
}

html:

<div class="body3_item">
                    <div class="body3_get">
                        <a class="" href="javascript:">
                            Patent
                        </a>
                    </div>
                    <div class="publication_button">
                        <a class="" href="javascript:">
                            Software copyright
                        </a>
                    </div>

     </div>

css:


.body3_item{
    width: 1080px;
    padding: 0 153px 20px 153px;
    margin: 0 auto;
}
.body3_get{
    padding: 0 30px;
    display: inline;
}
.body3_get a{
    font-size: 18px;
    font-weight:bold;
    color: #000;
    /*padding: 2px;*/
    border-bottom: solid #a2a2a2 2px;
}

.publication_button{

    padding: 0 30px;
    display: inline;
}

.publication_button a{
    font-size: 18px;
    font-weight:bold;
    color: #979797;
}

关于tab切换，绑定函数时不能直接使用遍历的索引变量var i，
需要自定义添加一个内部索引

mytab[i].getElementsByTagName("a")[0].indexs = i;

此处a标签是为了提高点击精度
为每一个成员绑定函数时，绑定的是同一个函数，该函数理解为一段代码，调用该函数时，其实是调用该段代码
该段代码使用的变量i 早已经循环增加到最大值。
var let const 详细区别见链接
https://blog.csdn.net/hot_cool/article/details/78302673