Question

请帮我解决我的代码..我有这个代码，我不知道有什么问题..这是我的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
    <input type="text" readonly value="krishna" ><br>
    <button id="next">Next</button>
</form>
<form id="radha">
    <input type="text" readonly value="radha" ><br>
    <button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
    $("#radha").hide();

    $("#next").click(function() {
        $("#radha").show();
        $("#krishna").hide();
    });

    $("#prev").click(function() {
        $("#radha").hide();
        $("#krishna").show();
    });
});
</script>

当我点击下一个似乎没有进入下一个表格..谢谢大家。

Answer 1

这可能是由于您的表单缺少一些属性

<强> HTML

<form id="krishna">
    <input type="text" readonly value="krishna" />
    <br />
    <button type='button' id="next">Next</button>
</form>
<form id="radha">
    <input type="text" readonly value="radha" />
        <br />
    <button type='button' id="prev">Previous</button>
</form>

<强>脚本

$(document).ready(function () {
    $("#radha").hide();

    $("#next").click(function () {
        $("#radha").show();
        $("#krishna").hide();
    });

    $("#prev").click(function () {
        $("#radha").hide();
        $("#krishna").show();
    });
});

检查here

Answer 2

您需要阻止默认操作，即表单提交。当您阻止发生默认操作时，您将看到所需的结果

检查this fiddle

$(document).ready(function () {
    $("#radha").hide();

    $("#next").click(function (e) {
        e.preventDefault();
        $("#radha").show();
        $("#krishna").hide();
    });

    $("#prev").click(function (e) {
        e.preventDefault();
        $("#radha").hide();
        $("#krishna").show();
    });
});

P.S我不知道你为什么还在使用jquery 1.3.x.

另外，请检查更新HTML的小提琴

Answer 3

这就是我做到的。

http://jsfiddle.net/GnzWZ/2/

$('form button').click(function(e){
    $("#radha, #krishna").toggle();
    return false;
});

注意：

return false是用于防止默认的jquery解决方案。
您可以简化选择器并优化代码。
避免进行最初应在CSS中进行的样式更改。

Answer 4

因为它正在尝试提交表单。因此，您需要将该按钮类型设置为按钮。默认情况下，表单中的“提交”。

JSFidle Demo

<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>

Answer 5

您的代码很好但是这里发生了什么，您的提交按钮需要发布请求。因此，您可以通过jquery的e.preventDefault（）函数来防止此行为。我已经更新了jquery代码，如下所示。

    $(document).ready(function(e) {
$("#radha").hide();

$("#next").click(function(e){
    e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});

$("#prev").click(function(e){
            e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});

}）;

访问以下链接以获取有关jsfiddle的演示：

http://jsfiddle.net/4N95Q/

Answer 6

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
    <input type="text" readonly value="krishna" ><br>
    <button id="next">Next</button>
</div>
<div id="radha">
    <input type="text" readonly value="radha" ><br>
    <button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
    $("#radha").hide();

    $("#next").click(function() {
        $("#radha").show();
        $("#krishna").hide();
        console.log("next click");
    });

    $("#prev").click(function() {
        $("#radha").hide();
        $("#krishna").show();
    });
});
</script>

如果更改

，则工作正常

形式

中的

DIV

Jquery单击，显示和隐藏功能

6 个答案: