Javascript 为什么html中的表单操作会自动触发？手风琴{ 背景色：#eee；颜色：#444；光标：指针；填充：18px；宽度：100%；边界：无；文本对齐：左对齐；大纲：无；字体大小：15px；过渡：0.4s； } 按钮。手风琴。激活，按钮。手风琴：悬停{ 背景色：#ddd； } 按钮。手风琴：之后{ 内容：'\02795'；字体大小：13px；颜色：#777；浮动：对；左边距：5px； } 按钮。手风琴。激活：之后{ 内容：“\2796”； } 分区小组{ 填充：0 18px；背景色：白色；最大高度：0；溢出：隐藏；过渡：0.6s缓进缓出；不透明度：0； } div.panel.show{ 不透明度：1；最大高度：500px； } 第一节第一章：第一章：第一章：第二节第一章：第一章：第一章： var acc=document.getElementsByClassName（“accordion”）； var i；对于（i=0；i_Javascript_Html_Css

Javascript 为什么html中的表单操作会自动触发？手风琴{ 背景色：#eee；颜色：#444；光标：指针；填充：18px；宽度：100%；边界：无；文本对齐：左对齐；大纲：无；字体大小：15px；过渡：0.4s； } 按钮。手风琴。激活，按钮。手风琴：悬停{ 背景色：#ddd； } 按钮。手风琴：之后{ 内容：'\02795'；字体大小：13px；颜色：#777；浮动：对；左边距：5px； } 按钮。手风琴。激活：之后{ 内容：“\2796”； } 分区小组{ 填充：0 18px；背景色：白色；最大高度：0；溢出：隐藏；过渡：0.6s缓进缓出；不透明度：0； } div.panel.show{ 不透明度：1；最大高度：500px； } 第一节第一章：第一章：第一章：第二节第一章：第一章：第一章： var acc=document.getElementsByClassName（“accordion”）； var i；对于（i=0；i

javascript html css

Javascript 为什么html中的表单操作会自动触发？手风琴{ 背景色：#eee；颜色：#444；光标：指针；填充：18px；宽度：100%；边界：无；文本对齐：左对齐；大纲：无；字体大小：15px；过渡：0.4s； } 按钮。手风琴。激活，按钮。手风琴：悬停{ 背景色：#ddd； } 按钮。手风琴：之后{ 内容：'\02795'；字体大小：13px；颜色：#777；浮动：对；左边距：5px； } 按钮。手风琴。激活：之后{ 内容：“\2796”； } 分区小组{ 填充：0 18px；背景色：白色；最大高度：0；溢出：隐藏；过渡：0.6s缓进缓出；不透明度：0； } div.panel.show{ 不透明度：1；最大高度：500px； } 第一节第一章：第一章：第一章：第二节第一章：第一章：第一章： var acc=document.getElementsByClassName（“accordion”）； var i；对于（i=0；i,javascript,html,css,Javascript,Html,Css,当我尝试单击“section 1”或“section 2”时，页面会自动重定向到page2.html。为什么会这样？使用相同的代码，我应该怎么做才能在“onsubmit”上添加java脚本函数？使用输入标记和类型为按钮 <!DOCTYPE html> <html> <head> <style> button.accordion { background-color: #eee; color: #444; cursor: p

当我尝试单击“section 1”或“section 2”时，页面会自动重定向到page2.html。为什么会这样？

使用相同的代码，我应该怎么做才能在“onsubmit”上添加java脚本函数？

使用输入标记和类型为按钮

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>

<form action="page2.html">

<button class="accordion">Section 1</button>
<div class="panel">
    Ch.1: <input type=checkbox id="ch1" ><br>
    Ch.1: <input type=checkbox id="ch1"><br>
    Ch.1: <input type=checkbox id="ch1"><br>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
</div>

<br>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

</body>
</html>

因为表单标签中的所有按钮元素都被视为提交类型

有关按钮和输入元素的更多信息，请查看下面的链接

使用输入标记和类型为按钮

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>

<form action="page2.html">

<button class="accordion">Section 1</button>
<div class="panel">
    Ch.1: <input type=checkbox id="ch1" ><br>
    Ch.1: <input type=checkbox id="ch1"><br>
    Ch.1: <input type=checkbox id="ch1"><br>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
    Ch.1: <input type="checkbox" id="ch1"><br>
</div>

<br>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

</body>
</html>

因为表单标签中的所有按钮元素都被视为提交类型

有关按钮和输入元素的更多信息，请查看下面的链接

您需要对按钮标签使用

type=“button”

，这样它就不会被视为导致表单操作执行的按钮提交

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i


button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
按钮。手风琴：之后{
内容：'\02795'；
字体大小：13px；
颜色：#777；
浮动：对；
左边距：5px；
}
按钮。手风琴。激活：之后{
内容：“\2796”；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡：0.6s缓进缓出；
不透明度：0；
}
div.panel.show{
不透明度：1；
最大高度：500px；
}

第一节
第一章：

第一章：

第一章：

第二节
第一章：

第一章：

第一章：

您需要对按钮标签使用type=“button”
，这样它就不会被认为是导致表单操作执行的按钮submit

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
按钮。手风琴：之后{
内容：'\02795'；
字体大小：13px；
颜色：#777；
浮动：对；
左边距：5px；
}
按钮。手风琴。激活：之后{
内容：“\2796”；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡：0.6s缓进缓出；
不透明度：0；
}
div.panel.show{
不透明度：1；
最大高度：500px；
}

第一节
第一章：

第一章：

第一章：

第二节
第一章：

第一章：

第一章：

如果您执行任何操作，它将重定向到您提到的“操作属性”页面，则应以其他方式提及任何按钮的“操作属性”
你可以在提交时这样尝试
<input type="button"></input>



Javascript:
     <form onsubmit="return yourFunctionNmae()">
           <input type="submit" value="Submit"/>
     </form>


函数yourFunctionName（）
{
//此处需要执行的操作。
}
如果您执行任何操作，它将重定向到您提到的“操作属性”页面，则应以其他方式提及任何按钮的“操作属性”
你可以在提交时这样尝试
<input type="button"></input>



Javascript:
     <form onsubmit="return yourFunctionNmae()">
           <input type="submit" value="Submit"/>
     </form>


函数yourFunctionName（）
{
//此处需要执行的操作。
}
Addonsubmit=“return false；”“
在tagIdk表单中添加原因；Addonsubmit=“return false；”“
在tagIdk表单中添加原因