创建监听器而不调用函数.显示和隐藏div

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。我怎样才能做一个监听器，而不是在每个a中调用函数?

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>

小提琴

Answer 2

看看。change jquery方法