如何防止在html5中按钮点击页面刷新?

时间:2012-12-28 15:54:11

标签: javascript html

我想阻止按钮点击重新加载页面。点击我只想交换按钮值而不刷新页面。我怎么能这样做?

<button id="4">134</button> // button 1 
<button id="5">234</button> // button 2 

点击按钮1(ID为“4”的按钮)后,我想要以下结果

// After clicking button 1
<button id="4">234</button> // button 1
<button id="5">134</button> // button 2 

如何在不重新加载/刷新html页面的情况下执行此操作。

3 个答案:

答案 0 :(得分:6)

要防止刷新,只需添加type =“button”

<button id="4" type="button">134</button> 
<button id="5" type="button">234</button>

至于交换价值,我重申了bmargulies,你需要学习javascript,或者让你的问题更清楚,这样我们才能给你一个更好的答案。

但是你的模糊问题(说明点击#4后文本应该交换)这里是使用jQuery的一些方向。这样做只会交换一次。

<script type="text/javascript">
    $(function(){
        $('#4').click(function(){
            $(this).html(234);
            $('#5').html(134);
        });
    });
</script>

有关jQuery的帮助:http://api.jquery.com/

答案 1 :(得分:2)

您提出了一个非常广泛的问题,它根本与HTML5无关。要获得此功能,您必须将javascript处理程序附加到按钮。有许多不同的JavaScript库可以帮助您,或者您可以编写原始的javascript。

你必须在javascript中进行大量基本的学习才能完成这个任务。

答案 2 :(得分:0)

UpHelix的答案解决了页面重新加载的主要问题。重置了许多浏览器上按钮的默认类型,这会导致重新加载页面,如问题How do i make an html button not reload the page?

的答案中所述

关于你的价值交换任务,我的代码为你做了工作

$(function() {
        $('button#4').click(function() {
            var firstButtonVal = $('button#4').text();
            var secondButtonVal = $('button#5').text();
            $('button#4').text(secondButtonVal);
            $('button#5').text(firstButtonVal);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="4" type="button">134</button>
<button id="5" type="button">234</button>