绑定函数

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值