单击按钮时,页面将返回历史记录
Page go back in history when button clicked
我有一个包含 5 个单选按钮的垂直无序列表,每 2 分钟生成一次动态文本。
<ul id="answerswers_ul">
<li><input class="alternative-letter" id="r1" name="r1" type="radio"><div class="answerswers_letters">A</div><label class="res1" for="r1"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
<li><input class="alternative-letter" id="r2" name="r1" type="radio"><div class="answerswers_letters">B</div><label class="res2" for="r2"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
<li><input class="alternative-letter" id="r3" name="r1" type="radio"><div class="answerswers_letters">C</div><label class="res3" for="r3"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
<li><input class="alternative-letter" id="r4" name="r1" type="radio"><div class="answerswers_letters">D</div><label class="res4" for="r5"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
<li><input class="alternative-letter" id="r5" name="r1" type="radio"><div class="answerswers_letters">E</div><label class="res5" for="r5"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
</ul>
问题如下。我在下面添加一个按钮
<button class="clean_question"></button>
当类被命名时,按钮的功能是清除单选按钮的答案(如果选中)。但是当我点击它时,页面加载了历史记录中的上一页!这真是太疯狂了。
我将粘贴与clean_question按钮相关的JS和CSS
。.CSS
button.clean_question{
background-color: #292f33;
border: 1px solid #55acee;
width: 60px;
height: auto;
margin-top: 5px;
border-radius: 50%;
margin-left: -34px;
float: left;
padding: 10px 12px;
z-index: 100;
position: absolute;
transition: 0.3s;
-webkit-transition: 0.3s;
}
button.clean_question:hover{
transform: scale(1.1,1.1);
}
button.clean_question:before{
content: url(../images/Examen_Botones_Clean.svg);
}
和 JS
function resetRadio(el) {
[].slice.call($('input[type="radio"][name="' + el.getAttribute('name') + '"]')).forEach(function(el) {
var path = el.parentNode.querySelector('svg > path');
if (path) {
path.parentNode.removeChild(path);
}
});
}
jQuery('button.clean_question').on('click', function(){
console.log('llegaste');
selectsArr.forEach(function(obj,i) {
[].forEach.call(obj.inputs,function(el){
if (el.getAttribute('type') === 'radio')
resetRadio(el);
})
});
请尝试哟帮助我,我真的被这个问题困住了。
<button type="">
属性默认为 submit
。
https://www.w3.org/TR/html/forms.html#attr-button-type
因此,默认情况下单击它将提交表单。默认情况下,表单目标与页面相同,这会导致重新加载。使用<button type="button">
来避免这种情况。
相关文章:
- 输入类型按钮返回历史记录并返回顶部
- HTML5历史记录-返回上一个完整页面按钮
- Sammy.js缓存和滚动位置时,返回历史
- 如何返回可用的历史记录状态数
- 引导选项卡不适用于历史记录.返回选项
- JS函数在浏览器历史记录中返回特定域的上次浏览页面
- 历史API/Angular:如何返回到预先确定的URL
- 单击按钮时,页面将返回历史记录
- 测试对历史记录 API 的支持在 IE 中返回 true
- 带有框架的浏览器中的按钮返回(历史记录转发不起作用)
- 当使用历史API时,我应该如何处理返回到加载的初始页面
- 谷歌浏览器“;返回“;以及“;向前“;历史
- 使用Javascript:如何创建'返回'如果存在'It’这个选项卡或窗口没有历史记录
- Javascript preventDefault历史记录返回
- 如何避免页面出现在“;返回“;按钮历史记录
- 返回链接,但不使用历史记录
- Javascript历史返回清除表单
- & # 39;智能# 39;Wordpress自定义帖子类型的历史返回按钮
- 需要点击两次返回历史记录(使用pushState)
- 与window.history.pushState组合返回历史记录时,页面不会重新加载