Question

我试图切换一些div并且它不起作用，这里是js：

<script type="text/javascript">
        $(function(){   

            $('#toggle_full').click(function(){         
                $('#full_size').removeClass('toggle');
                $('#thumb_list').addClass('toggle');
            });
        });

        $(function(){   

            $('#toggle_thumb').click(function(){            
                $('#thumb_list').removeClass('toggle');
                $('#full_size').addClass('toggle');
            });
        });
    </script>

以下是主播：

<div class="toggle_block">
        <a href="#" id="toggle_full"><img src="img/full_icon.jpg" alt="#"/></a>
        <a href="#" id="toggle_thumbs"><img src="img/thumbs_icon.jpg" alt="#"/></a>
    </div>

这是班级：

.toggle {
display: none;
}

现在问题出在哪里了？

Answer 1

您的身份证不匹配。

在您的HTML中，您有toggle_thumbs，但在您的代码中，您有toggle_thumb。

如果你正在做的就是隐藏和显示，你可以大大简化你的代码：

http://jsfiddle.net/xTPU8/2/

$(function() {
    var $elems = $('#toggle_full').hide()
        .add('#toggle_thumb').click(function() {
            $elems.toggle();
    });
});

编辑：让它更高效。

Answer 2

在return false;代表中添加.click()，以防止浏览器导航到“＃”（跳转到页面顶部）。

您也可以简化您的JS，但将两个链接绑定放在一起，并使用已建议的hide()和show()。最终结果将是：

<script type="text/javascript">

    $(function() {   

        $('#toggle_full').click(function() {         
            $('#full_size').show();
            $('#thumb_list').hide();
            return false;
        });


        $('#toggle_thumb').click(function() {            
            $('#thumb_list').show();
            $('#full_size').hide();
            return false;
        });

    });

</script>

切换div问题

2 个答案: