Question

<a onclick="showhide('1');">asd1</a>
<a onclick="showhide('2');">asd2</a>
<a onclick="showhide('3');">asd3</a>

<div class="hide" id="1">asd1</div>
<div class="hide" id="2">asd2</div>
<div class="hide" id="3">asd3</div>

<script>
    function showhide(id){
        if (document.getElementById) {
            var divid = document.getElementById(id);
            var divs = document.getElementsByClassName("hide");
            for(var i=0;i<divs.length;i++) {
                divs[i].style.display = "none";
            }
            divid.style.display = "block";
            $('html, body').animate({scrollTop: $(divid).offset().top}, 'slow');
        } 
        return false;
    }
</script>

我这样做是为了显示和隐藏div。我怎样才能建立一个监听器，而不是每个人都调用该函数？

Answer 1

对于您的示例，您只需使用索引

<a href="#" class="myAnchor">asd1</a>
<a href="#" class="myAnchor">asd2</a>
<a href="#" class="myAnchor">asd3</a>

<div class="hide">asd1</div>
<div class="hide">asd2</div>
<div class="hide">asd3</div>

<script>
    $(function() {
        $('.myAnchor').on('click', function(e) {
            e.preventDefault();
            $('.hide').hide().eq( $('.myAnchor').index(this) ).show();
        });
    });
</script>

FIDDLE

Answer 2

看看.change jquery方法

制作听众而不是调用该函数。显示和隐藏div

2 个答案: