jquery show hide div的href标记

Question

我有一些jQuery的基础上按下哪个按钮显示和隐藏新div的。而不是我想插入自己的文本/图像的按钮，并让它们以相同的方式工作，揭示和隐藏新窗口。

这里是jquery的：

<script> 
    $(document).ready(function(){ 

     $(".buttons").click(function() { 
     var divname= this.value; 
      $("#"+divname).show("slow").siblings().hide("slow"); 
     }); 

     }); 
</script> 

这里是，我想改变到一个href标记的按钮中的一个的代码。

<input type="button" id="button1" class="buttons" value="div1"></input> 

任何帮助将不胜感激。谢谢。皮娅

Answer 1

您可以使用jQuery的data()方法 - http://api.jquery.com/data/ - 存储锚元素上的任意数据（DIV ID），然后使用该值以显示正确的DIV：

<div id="div1">div one</div> 
<div id="div2">div two</div> 
<a href="#" class="abuttons" data-divid="div1">link</a> 

<script> 
$(document).ready(function(){ 
    $(".abuttons").click(function() { 
     var idname= $(this).data('divid'); 
     $("#"+idname).show("slow").siblings().hide("slow"); 
    }); 
}); 
</script> 

如果你想显示两个div使用类名替代ID，将类名存储在achor标记上，在每个要显示的div上设置相同的类，然后使用.代替#

<div id="div1" class="divclass">div one</div> 
<div id="div2" class="divclass">div two</div> 

<a href="#" class="abuttons" data-divclass="divclass">link</a> 

<script> 
$(document).ready(function(){ 
    $(".abuttons").click(function() { 
     var classname= $(this).data('divclass'); 
     $("."+classname).show("slow").siblings().hide("slow"); 
    }); 
}); 
</script>