Javascript 单击选项卡时如何防止页面提交？

我想在我的页面中添加选项卡以按组组织输入字段，但这只是一个模板。 问题是，当我单击一个选项卡时，页面提交并给我一个404错误页面，但它不应该这样做

我只是从W3学校复制了这个例子

请注意，我是javascript和html的新手。 我不知道怎么了。我试图在javascript函数中添加return false，但页面仍然提交，我还添加了一个“onsubmit”属性，设置为“button标记上的return false”

---

我试图注释掉onclick事件上的更新返回函数

---

更新onclick事件的返回函数

---

当表单中有按钮元素时，其默认类型为submit。也就是说，当他们被点击时，他们会提交表单。有多种方法可以防止此操作，例如，可以从事件处理程序调用

但最简单的解决方案是将button元素的type属性更改为button。这将阻止在单击按钮时提交表单。引述：

[类型属性]的可能值为：

提交：按钮将表单数据提交到服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值

重置：该按钮将所有控件重置为其初始值

按钮：按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时被触发

因此

身体{ 字体系列：Arial； } /*设置选项卡的样式*/ .标签{ 溢出：隐藏； 边框：1px实心ccc； 背景色：F1F1； } /*设置选项卡内按钮的样式*/ .选项卡按钮{ 背景色：继承； 浮动：左； 边界：无； 大纲：无； 光标：指针； 填充：14px 16px； 过渡：0.3s； 字号：17px； } /*更改悬停按钮的背景色*/ .tab按钮：悬停{ 背景色：ddd； } /*创建活动/当前tablink类*/ .tab按钮。激活{ 背景色：ccc； } /*设置选项卡内容的样式*/ .tabcontent{ 显示：无； 填充：6px 12px； 边框：1px实心ccc； 边界顶部：无； } 输入所有请求输入字段 资本要求 资本设备 资本附件 资本要求 资本设备 资本附件

---

当表单中有按钮元素时，其默认类型为submit。也就是说，当他们被点击时，他们会提交表单。有多种方法可以防止此操作，例如，可以从事件处理程序调用

但最简单的解决方案是将button元素的type属性更改为button。这将阻止在单击按钮时提交表单。引述：

[类型属性]的可能值为：

提交：按钮将表单数据提交到服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值

重置：该按钮将所有控件重置为其初始值

按钮：按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时被触发

因此

身体{ 字体系列：Arial； } /*设置选项卡的样式*/ .标签{ 溢出：隐藏； 边框：1px实心ccc； 背景色：F1F1； } /*设置选项卡内按钮的样式*/ .选项卡按钮{ 背景色：继承； 浮动：左； 边界：无； 大纲：无； 光标：指针； 填充：14px 16px； 过渡：0.3s； 字号：17px； } /*更改悬停按钮的背景色*/ .tab按钮：悬停{ 背景色：ddd； } /*创建活动/当前tablink类*/ .tab按钮。激活{ 背景色：ccc； } /*设置选项卡内容的样式*/ .tabcontent{ 显示：无； 填充：6px 12px； 边框：1px实心ccc； 边界顶部：无； } 输入所有请求输入字段 资本要求 资本设备 资本附件 资本要求 资本设备 资本附件 使用preventDefault应该可以帮你完成任务。试试这个

  function viewTab(evt, tabId) {
        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(tabId).style.display = "block";
        evt.currentTarget.className += " active";
        evt.preventDefault
        return false;
    }

如果你愿意，这里有更多的信息。使用默认设置可以帮你完成任务。试试这个

  function viewTab(evt, tabId) {
        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(tabId).style.display = "block";
        evt.currentTarget.className += " active";
        evt.preventDefault
        return false;
    }

如果您愿意，这里将提供更多信息

使用按钮类型=按钮

因为您没有提到按钮的类型，所以提交表单时使用按钮类型=按钮

---

因为您没有提到按钮的类型，所以在函数viewTabevt之后提交表单

，tabId{line尝试添加evt.preventDefault；在函数viewTabevt之后，tabId{line尝试添加evt.preventDefault；我添加了evt.preventDefault；在evt.currentTarget.classNam之后

---

e+=活跃的；谢谢它也起作用了！我添加了evt.preventDefault；在evt.currentTarget.className+=活动之后；谢谢它也起作用了！哇！非常感谢。我不知道我们可以在这里运行代码片段。这个解决方案对我有效too@PatrickTolentino是的，你可以。当你编辑你的问题或答案时，有一个按钮[]可以让你创建一个片段。哇。非常感谢。我不知道我们可以在这里运行代码片段。这个解决方案对我有效too@PatrickTolentino是的，你可以。编辑问题或答案时，会有一个按钮[]，允许您创建代码段。

<button class="tablinks" 
    onclick="viewTab(event, 'capitalrequest')" 
    onsubmit="return false;">Capital Request</button>

<button type="button" class="tablinks" 
    onclick="viewTab(event, 'capitalrequest')" 
    onsubmit="return false;">Capital Request</button>

You just add this line in your js function like below,

document.getElementById(tabId).style.display = "block";
evt.currentTarget.className += " active";
**evt.preventDefault();**
return false;

  function viewTab(evt, tabId) {
        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(tabId).style.display = "block";
        evt.currentTarget.className += " active";
        evt.preventDefault
        return false;
    }