Question

<!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>

当我尝试点击＆＃34;第1部分＆＃34;或者＆＃34;第2节＆＃34;，页面会自动重定向到page2.html。为什么会这样？使用相同的代码，我该如何在＆＃34; onsubmit＆＃34;上添加java脚本函数？

Answer 1

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

<input type="button"></input>

由于表单标记内的所有按钮元素都被视为提交类型。

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

Difference between <input type='submit' /> and <button type='submit'>text</button>

Answer 2

您需要使用imgVw.clipsToBounds=YES;作为按钮标记，以便不将其视为导致执行表单操作的按钮提交

＆＃13;

type="button"

＆＃13;

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");
  }
}

＆＃13;

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;
}

＆＃13;

Answer 3

如果您执行任何操作，您应该提及任何其他按钮的操作属性，它将重定向到您为行动属性提及的页面。

您可以尝试使用onsubmit。

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

使用Javascript：

     <script type="html/javascript">
          function yourFunctionName()
          {
                 //required action to be done here.
          }
     </script>

为什么自动触发html中的Form操作？

3 个答案: