Question

我是一个非常新的网络开发人员，学习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;
}

Answer 2

在您的情况下，this引用包含事件处理程序属性的对象。

this是JavaScript最实用的功能之一，以您问题中显示的方式使用它正是它的设计目标。由事件处理程序运行的另一个函数可以因此接收对象作为其参数之一。

我正在查看您的代码，看看它可能会发生什么。

更新：您的事件处理程序没有停止提交链接，这意味着您的页面将使用您指定的查询字符串重新加载。

您现在有两个选择：

在您的事件处理程序中返回false，以防止跟踪链接并刷新页面。 喜欢这个： onclick="switchf('Home',this); return false;"
允许跟踪链接并将事件处理程序更改为查询字符串解析器，该解析器根据当前查询字符串更改活动选项卡。（此解决方案将是首选，因为它允许访问者直接从外部链接查看特定选项卡，而无需关注指向您网站的链接，然后再单击某个选项卡。）

P.S。以下是我的一些代码，几乎完全相同，并使用与您发布的代码相同的参数：

http://jsfiddle.net/cookies/4JPJA/2/

传递“this”作为论据

2 个答案: