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，则单击链接将滚动（到页面顶部，而不是底部！）。如果你让它返回false，那么它根本不会滚动。

参见编辑过的JSFiddle：http://jsfiddle.net/zd2ykjoy/1/

Answer 2

要在页面加载时加载第一个标签，请尝试以下操作：

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

并在点击链接时避免页面跳转，请尝试以下操作：

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

点击div时jQuery加载内容 - 内容跳转

2 个答案: