jquery - jquery show hide div's with a href 标签

Question

我有一些 jquery 可以根据按下的按钮显示和隐藏新的 div。而不是按钮，我想插入我自己的文本/图像并让它们以相同的方式工作，显示和隐藏新窗口。

这是jQuery：

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

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

      });
</script> 

这是我想更改为 aa href 标记的按钮之一的代码。

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

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

Answer 1

您可以使用 jQuerydata()方法 - 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>

如果您想使用类名而不是 ID 显示两个 div，请将类名存储在 achor 标记上，在要显示的每个 div 上设置相同的类，并在 jQuery 中使用 a.而不是a 来引用它#

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