Question

我希望有人可以帮助我在加载页面时加载第一个标签（使其处于活动状态）。现在，jquery选项卡在单击后才能正常工作。

我正在使用此代码：

HTML

<a class="link" href="#" rel="div1">Tab 1</a>
<a class="link" href="#" rel="div2">Tab 2</a>

<div class="content5" id="div1">Content of Tab 1</div>
<div class="content5" id="div2">Content of Tab 2</div>

使用Javascript / Jquery的

$('.link').click(function(e) {
    e.preventDefault();
    var content = $(this).attr('rel');
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('.content5').hide();
    $('#' + content).show();
});

有什么想法吗？

Answer 1

$(document).ready(function() {
    $('.link:first').addClass('active');
});

Answer 2

我会封装显示逻辑;

function showTab(jqEl) {
    var content = jqEl.attr('rel');
    $('.active').removeClass('active');
    jqEl.addClass('active');
    $('.content5').hide();
    $('#' + content).show();
};

根据需要拨打电话;

$('.link').click(function(e) {
    e.preventDefault();
    showTab($(this));
});

和

$().ready(function() {
  showTab($(".link[rel=div1]")); //or better
});

Answer 3

您可以在绑定后触发第一个链接上的点击：

$('.link')
    .click(function(e) {
        ...
    })
    .first().click(); // or .trigger('click')

.click() / .trigger('click')

Answer 4

只需使用HTML和CSS使其可见，即：

标签1 标签2

标签1的内容标签2的内容

因此，第一个链接以active类开头，第一个标签从display:block开始显示。

Answer 5

您可以将代码包装在一个函数中吗？从事件内部调用函数，传入thr对象$（this）。在页面加载中调用函数传入（'。link'）。first（）

Answer 6

我不确定您使用的是哪个jquery但是以简单的方式尝试在页面加载中加载选项卡，如下所示：

 $(document).ready(function () {
            $("#tabs").tabs({ selected: 1 });
        });

加载页面时显示第一个选项卡

6 个答案: