单击按钮时更改选项卡答案

【问题标题】：Changing Tabs upon Button Click单击按钮时更改选项卡
【发布时间】：2017-02-13 01:33:52
【问题描述】：

目前，我正在使用以下链接中的指南来确定如何构建选项卡 (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 是未定义的。在如何定义参数 evt 以在按下按钮时更改选项卡的任何帮助将不胜感激（最好使用 javascript 解决方案）。

【问题讨论】：

标签： javascript html

【解决方案1】：

你需要像这样传递实际的点击事件：

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

也作为一般规则：尽量避免 w3schools 成为瘟疫。整体质量非常低。更好的选择是在 stackoverflow 中搜索特定问题的解决方案，并使用 mozilla 来参考与 DOM 相关的所有内容。

【讨论】：

【解决方案2】：

正如 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

希望这会有所帮助！

【讨论】：