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>