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

【问题标题】：Show first tab when page is loaded加载页面时显示第一个选项卡
【发布时间】：2012-02-28 13:04:29
【问题描述】：

我希望有人可以在页面加载时帮助我加载第一个选项卡（使其处于活动状态）。现在 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();
});

有什么想法吗？

【问题讨论】：

标签： javascript jquery html tabs click

【解决方案1】：

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

【讨论】：

这个或任何类 UI 选项卡添加到活动选项卡
谢谢。有用！页面加载后，只有第二个选项卡内容（div2）不隐藏。我试图把 $('.content5 #div2').hide();在就绪功能中，但它不起作用。编辑：抱歉仍然解决了：$('.content5:last').hide();.

【解决方案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
});

【讨论】：

【解决方案3】：

绑定后第一个链接可以触发点击：

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

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

【讨论】：

【解决方案4】：

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

标签 1 选项卡 2

表 1 的内容表 2 的内容

所以第一个链接以 active 的类开头，第一个选项卡开始时通过 display:block 可见。

【讨论】：

【解决方案5】：

你能把代码包装在一个函数中吗？从事件内部调用函数，传入 thr 对象 $(this)。页面加载时调用函数传入('.link').first()

【讨论】：

【解决方案6】：

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

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

【讨论】：