在点击菜单元素上隐藏表格

Question

我想在网页中隐藏或显示不同的表单。我有：

<ul> 
    <li><a id="menu" href="#">Article1</a></li> 
    <li><a id="menu" href="#">Article2</a></li> 
</ul> 
/*Here some forms*/ 
    <div class="desc"> 
     <form> 
     <input etc...> 
     </form> 
    </div> 
    <div class="desc"> 
     <form> 
     <input etc...> 
     </form> 
    </div> 

的jQuery：

$(document).ready(function(){ 
    $("a[name$='menu']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#"+test).show(); //maybe i could use slidetoogle 
    }); 
}); 

我想隐藏的所有其他形式和显示仅在点击链接的形式。此代码不起作用！

Answer 1

将锚的id更改为class，即<a class="menu" href="#">。

现在改变代码TO-

$(document).ready(function(){ 
    $(".menu").click(function() { 
     var test = $(this).text(); 
     $("div.desc").hide(); 
     $("#"+test).show(); //maybe i could use slidetoogle 
    }); 
}); 

Answer 2

试试这个：

$(document).ready(function(){ 
$("a").click(function() { 
    var test = $(this).text(); 
    $("div.desc").hide(); 
    $("#"+test).show(); 
    }); 
}); 

Answer 3

为@Rajaprabhu Aravindasamy说你不应该使用重复的ID。

相反标识使用Class = “菜单”，改变你的选择如下面的代码

$(document).ready(function(){ 
    $(".menu").click(function() { 
     var test = $(this).text(); 
     $("div.desc").hide(); 
     $("#"+test).show(); 
    }); 
}); 

Answer 4

尝试它的工作http://jsfiddle.net/NjgQt/

<ul> 
    <li><a id="menu" href="#form1">Article1</a></li> 
    <li><a id="menu" href="#form2">Article2</a></li> 
</ul> 
<div class="desc" id="form1"> 
    <form> 
    <input type="text" value="form1"/> 
    </form> 
</div> 
<div class="desc" id="form2"> 
    <form> 
    <input type="text" value="form2"/> 
    </form> 
</div> 

$(document).ready(function(e) {  
    $('.desc:not(:first)').hide(); 
    $("a").click(function() { 
     var test = $(this).attr('href'); 
     $("div.desc").hide(); 
     $(test).show(); 
    }); 

});