javascript - 传递 "this"作为参数

Question

我是一名新的 Web 开发人员，正在学习 html5 和 javascript。

我有一个带有“选项卡”的网页，可以使网页的某些部分消失并重新出现。

链接如下:

<a href="?tab=1" id="t1" class="tab" onclick="switchf('Home',this)">HOME</a>

和 JavaScript 函数 switchf()是这样的:

function switchf(field,tab) {
    var divs = ["Home","About","Chatroom","Account","Contact","Signup"];
    for(var j = 0; j < divs.length; j++) {
        if(field != divs[j])
            document.getElementById(divs[j]).style.display = "none";
        else
            document.getElementById(divs[j]).style.display = "block";
    }

    var t = document.getElementsByClassName("tab");
    for(var i = 0; i < t.length; i++) {
        t[i].style.backgroundColor = "#dddddd";
    }

    tab.style.backgroundColor = "#cccccc";
    document.getElementsByTagName("title")[0].innerHTML = field;
}

它需要两个参数 - 要显示的页面部分和按下的选项卡。

它循环遍历页面的各个部分并将它们全部更改为 display="none" ，然后转到所有选项卡并将其更改为 backgroundColor="#dddddd" .

然后它选择右侧选项卡来更改颜色并显示页面的右侧部分。

但是，当我经过this时作为参数( onclick="switchf('Home',this)" )，它不会改变颜色( tab.style.backgroundColor = "#cccccc"; )。

这是正确的通过方式吗this作为一个论点？我认为这将是最简单的方法 - 但我以前从未在 js 中使用过它，并且在这个示例中不起作用。

像我所有其他错误一样，这可能是一个非常简单的错误，但请向我指出。

谢谢。

Answer 1

问题在于您正在遵循 href，这会刷新页面。将 return false 添加到内联处理程序以防止出现这种情况。

<a href="?tab=1" id="t1" class="tab" onclick="switchf('Home',this); return false;">HOME</a>

<小时/>

或者只是在函数调用之前添加return，然后在函数内部添加return false。

<a href="?tab=1" id="t1" class="tab" onclick="return switchf('Home',this);">HOME</a>

function switchf(field,tab) {
    var divs = ["Home","About","Chatroom","Account","Contact","Signup"];
    for(var j = 0; j < divs.length; j++) {
        if(field != divs[j])
            document.getElementById(divs[j]).style.display = "none";
        else
            document.getElementById(divs[j]).style.display = "block";
    }

    var t = document.getElementsByClassName("tab");
    for(var i = 0; i < t.length; i++) {
        t[i].style.backgroundColor = "#dddddd";
    }

    tab.style.backgroundColor = "#cccccc";
    document.getElementsByTagName("title")[0].innerHTML = field;

    return false;
}