当div单击时jQuery加载内容-内容跳转

Question

我有一个jQuery，它在点击div时显示内容.

<ul>
    <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li>
</ul>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
    <div id="content4">This is the test content for part 4</div>
    <div id="content5">This is the test content for part 5</div>
</div>


<!-- language: lang-js -->

jQuery(document).ready(function () {
    jQuery(function () {
        jQuery(".link").click(function () {
            if (jQuery(this).hasClass('active')) {
                return;
            }

            jQuery('.active').removeClass('active');
            jQuery(this.parentNode).addClass('active');

            jQuery('.content-container div').fadeOut('slow');
            jQuery('#' + jQuery(this).data('rel')).fadeIn('slow');
        });
    });
});

http://jsfiddle.net/zd2ykjoy/

它工作得很好，但是，我想设置它，以便在页面加载时，自动选择第一个选项卡。

另外，当上面有内容时，单击任何选项卡会使页面跳转到内容的底部，知道为什么会发生这种情况吗？

Answer 1

使用jQuery(".link").first().click();在页面启动时选择第一个选项卡。

如果您没有从单击事件处理程序函数返回false，那么单击一个链接将滚动(到页面的顶部，而不是底部！)。如果你让它返回假，那么它将根本不会滚动。

请参阅编辑的JSFiddle：http://jsfiddle.net/zd2ykjoy/1/

Answer 2

若要在加载页时加载第一个选项卡，请尝试如下：

jQuery(".link")[0].click();

为了避免单击链接时页面跳转，请尝试如下：

jQuery(".link").click(function(e) {
    e.preventDefault();
    ...