1

我是一个非常新的网络开发人员，学习 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 中使用过它，它在此示例中不起作用。

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

谢谢。

4

2 回答 2

3

问题是您正在关注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;
}
于 2013-09-07T19:39:27.483 回答
0

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

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

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

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

你现在有两个选择：

  1. 在您的事件处理程序中返回false以防止链接被跟踪并刷新页面。像这样： onclick="switchf('Home',this); return false;"

  2. 允许跟踪链接并将您的事件处理程序更改为查询字符串解析器，该解析器根据当前查询字符串更改活动选项卡。（此解决方案将是首选，因为它允许访问者直接从外部链接查看特定选项卡，而无需点击指向您网站的链接，然后再单击某个选项卡。）

PS 这是我的一些代码，它们几乎做同样的事情，并使用与您发布的代码相同的参数：

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

于 2013-09-07T19:34:47.340 回答