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更改为类，即<a class="menu" href="#">。

现在将代码更改为 -

$(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

as @Rajaprabhu Aravindasamy说你不应该使用重复的id。

而是使用Class =“menu”并将选择器更改为以下代码

$(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();
    }); 

});

在单击菜单元素上交替隐藏表单

4 个答案: