Question

目前，我正在使用以下链接中的指南来确定如何构建标签（http://www.w3schools.com/howto/howto_js_tabs.asp）。

     function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
     }

     // Get the element with id="defaultOpen" and click on it
     document.getElementById("defaultOpen").click();

我想更改按下按钮时显示的标签。因此，在javascript中的eventListener代码中：

     document.getElementById("btn_click").addEventListener("click", function() {
             openTab("click", "tab2");
     }

这给了我作为evt的“click”未定义。非常感谢有关如何定义参数evt以在按下按钮时更改标签的任何帮助（javascript soln将是更可取的）。

Answer 1

你在w3schools网站上说，你只需要在按下按钮时运行此代码。

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

以下是HTML和JS：http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

希望这有帮助！

Answer 2

您需要传递实际点击事件，如下所示：

document.getElementById("btn_click").addEventListener("click", function(e){
    openTab(e, "tab2");
})

另外作为一般规则：尽量避免w3schools是瘟疫。质量总体上非常低。更好的选择是只搜索stackoverflow以获取特定问题的解决方案，并使用mozilla来引用与DOM相关的所有内容。

按钮上的更改选项卡单击

2 个答案: