禁用多种形式，使一个形式Javascript或jQuery的

-2

根据病情我有四个格式如form-1，form-2，form-3，form-4三Buttons为Button-1，Button-2，Button-3。禁用多种形式，使一个形式Javascript或jQuery的

当第一个jsp页面加载时，它具有将显示在屏幕上的表单元素。现在

我的问题是，当我点击button-2它应该显示form-2并禁用其他三种形式（form-1，form-3，form-4）.Same情况下与其他两个按钮。

请给我提供适当的解决方案使用JavaScript或jQuery。

我使用jsp页面进行html表单设计。

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 
     <script type="text/javascript"> 
    $("#b1").click(function(){ 
    $("#f2,#f3,#f4").hide(); 
    $("#f1").show(); 
    }); 

$("#b2").click(function(){ 
    $("#f1,#f3,#f4").hide(); 
    $("#f2").show(); 
    }); 

$("#b3").click(function(){ 
    alert("jj"); 
    $("#f1,#f2,#f4").hide(); 
    $("#f3").show(); 
    }); 



</script> 
<style type="text/css"> 
    #f2,#f3,#f4{ 
    display: none; 
    } 
</style> 
    </head> 
    <body > 
     <form id="f1"> 
     <input type="text" name="name" placeholder="f1" > 
    </form> 
    <form id="f2"> 
     <input type="text" name="name" placeholder="f2" > 
    </form> 
     <form id="f3"> 
     <input type="text" name="name" placeholder="f3" > 
    </form> 
     <form id="f4"> 
     <input type="text" name="name" placeholder="f4" > 
    </form> 

     <input type="button" value="b1" id="b1" > 
     <input type="button" value="b2" id="b2"> 
     <input type="button" value="b3" id="b3"> 


    </body> 
</html>

我也做了编码按照上面的回答，但我没能获得不同的形式当我点击。我检查警报消息也点击不工作。请告诉我我在哪里做错了。

来源

2014-02-14 user3311567

你应该先尝试一下。 –

我是网络新手，如果我得到一些帮助，它会更温柔。我不知道如何开始？我现在是初学者，尝试学习。 – user3311567

看到你正在使用的代码/标记是有帮助的，所以我们有一些上下文。 – reergymerej

这里是示例。

现场演示：http://jsfiddle.net/a6NJk/626/

的Html

你需要四种形式和三个按钮是：

<form id="f1"> 
    <input type="text" name="name" placeholder="f1" > 
</form> 

<form id="f2"> 
    <input type="text" name="name" placeholder="f2" > 
</form> 

<form id="f3"> 
    <input type="text" name="name" placeholder="f3" > 
</form> 

<form id="f4"> 
    <input type="text" name="name" placeholder="f4" > 
</form> 

<input type="button" value="b1" id="b1" > 
<input type="button" value="b2" id="b2"> 
<input type="button" value="b3" id="b3">

jQuery的

当你将按钮点击你需要显示相应的表格和h ide所有其他形式。
见jQuery的API：http://api.jquery.com/

$("#b1").click(function(){ 
    $("#f2,#f3,#f4").hide(); 
    $("#f1").show(); 
    }) 

$("#b2").click(function(){ 
    $("#f1,#f3,#f4").hide(); 
    $("#f2").show(); 
    }) 

$("#b3").click(function(){ 
    $("#f1,#f2,#f4").hide(); 
    $("#f3").show(); 
    })

CSS

#f2,#f3,#f4{ 
    display: none; 
    }

如果你想使用锚标记，而不是按钮，然后更改您的HTML：

<form id="f1"> 
    <input type="text" name="name" placeholder="f1" > 
</form> 
<form id="f2"> 
    <input type="text" name="name" placeholder="f2" > 
</form> 
    <form id="f3"> 
    <input type="text" name="name" placeholder="f3" > 
</form> 
    <form id="f4"> 
    <input type="text" name="name" placeholder="f4" > 
</form> 

     <a href="javascript:void(0)" id="b1" > b1</a > 
     <a href="javascript:void(0)" id="b2" > b2</a> 
     <a href="javascript:void(0)" id="b3" > b3</a >

演示：http://jsfiddle.net/a6NJk/627/

来源

2014-02-14 20:14:30

嗨，感谢您的样品，它非常好。你能帮助我，而不是按钮，如果我有一样的情况button1，button2，button3那么该如何解决 – user3311567

@ user3311567：看到我的更新答案 –

@ user3311567：如果它的工作，并帮助再接受我的答案:) –

禁用多种形式，使一个形式Javascript或jQuery的

回答

相关问题