Question

点击按钮后更改标签

2017-02-12

856

javascript html

目前，我正在使用以下链接中的指南来确定如何构建选项卡（ 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 解决方案）。

Answer 1

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

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

另外，作为一般规则：尽量避免 w3schools 的泛滥。整体质量非常低。更好的办法是只在 stackoverflow 上搜索特定问题的解决方案，并使用 mozilla 参考所有与 DOM 相关的内容。

Answer 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

希望这对您有帮助！