隐藏/显示不'；使用jQuery（JavaScript）时是否无法正常工作？_Javascript_Jquery

隐藏/显示不'；使用jQuery（JavaScript）时是否无法正常工作？

javascript jquery

隐藏/显示不'；使用jQuery（JavaScript）时是否无法正常工作？,javascript,jquery,Javascript,Jquery,如何使用jQuery选择器隐藏/显示html节点？看小提琴。其目的是通过单击第一个按钮隐藏text1段落，并通过单击其他按钮隐藏其他文本。现在，节点已隐藏，但随后会重新出现。请解释一下这里是html部分 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></scri

如何使用jQuery选择器隐藏/显示html节点？看小提琴。其目的是通过单击第一个按钮隐藏

text1

段落，并通过单击其他按钮隐藏其他文本。现在，节点已隐藏，但随后会重新出现。请解释一下

这里是html部分

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/test.js"></script>
</head>
<body>
<p id="text1">text1</p>
<p id="text2">text2</p>
<form>
<input type="submit" id="hide1"></input>
<input type="submit" id="hide2"></input>
</form>

</body>
</html>

将

type=“submit”

更改为

type=“button”

。否则，它将提交表单。

您可以将类型更改为button，或者如果您有理由将其保留为submit，则可以执行以下操作：

$(document).ready(function(){
    $("#hide1").click(function(e){
        $("#text1").hide();
        $("#text2").show();
        e.preventDefault();
    });
    $("#hide2").click(function(e){
        $("#text2").hide();
        $("#text1").show();
        e.preventDefault();
    });
});

您提交的表单实质上是重新加载页面。e.preventDefault（）阻止该操作。

您在html中使用表单标记，并在其上使用类型为submit的按钮，因此它会回发页面，因此您会看到标签在回发后再次显示这将解决您的问题（将按钮类型更改为button）


text1
text2

这里有几个选项

不要提交表格。您可以通过不使用提交按钮来实现这一点。为此，请将输入类型设置为

按钮

，而不是

提交

<input type="button" id="hide1" value="hide"> <!-- note: input close tag removed/unnecessary —>

提交按钮的默认行为是发布表单。所以，如果希望将这些按钮保留为submit按钮，则必须使用preventDefault（）方法，或者可以返回false以防止表单发布

$(document).ready(function(){
   $("#hide1").click(function(e){
       $("#text1").hide();
       $("#text2").show();
       return false;
   });
   $("#hide2").click(function(e){
       $("#text2").hide();
       $("#text1").show();
       return false;
   });
});

默认情况下，提交输入类型将按照所述操作：提交表单，从而刷新页面。有一种方法可以防止这种默认行为：

// event.preventDefault();
$("#hide1").click(function(event){
    event.preventDefault();

    // continue
});

preventDefault（）将防止触发默认行为，在这种情况下是：提交表单。

submit

通常通过您在表单中提到的

HTTP

方法或

GET

方法（如果您没有提到任何方法）将页面中的表单提交给服务器。这通常会导致浏览器转到

目标

页面，或者在未提及目标时刷新。这就是隐藏文本返回的原因，因为当您点击

submit

按钮时，所有内容都会重置。谢谢，非常有用！

<button type="button" id="hide1">hide</button>

$(document).ready(function(){
    $("#hide1").click(function(evnt){  // make sure to localize/name the event argument
        $("#text1").hide();
        $("#text2").show();
        return false;  // or evnt.preventDefault()
    });
    $("#hide2").click(function(evnt){  // make sure to localize/name the event argument
        $("#text2").hide();
        $("#text1").show();
        return false;  // or evnt.preventDefault()
    });
});

$(document).ready(function(){
   $("#hide1").click(function(e){
       $("#text1").hide();
       $("#text2").show();
       return false;
   });
   $("#hide2").click(function(e){
       $("#text2").hide();
       $("#text1").show();
       return false;
   });
});

// event.preventDefault();
$("#hide1").click(function(event){
    event.preventDefault();

    // continue
});