加载页面时显示第一个标签

问题描述：

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

任何想法？

答

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

这个，或者任何类的UI标签添加到活动标签 – Johan 2012-02-28 13:08:16

谢谢。有用！加载页面后，只有第二个标签内容（div2）不会隐藏。我试图把$（'。content5＃div2'）。hide（）;在准备好的功能，但它不工作。编辑：对不起还解决了：$（'。content5：last'）。hide（）;. – Erikdg 2012-02-28 13:25:40

答

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

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

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

答

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

表1 表2

表1的内容标签2的内容

因此，第一个链接从active开始，第一个标签从display:block开始显示为可见。

答

我会封装显示逻辑;

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 
});

答

你可以用代码的功能？从事件内部调用函数，传入thr对象$（this）。呼叫在页面加载的功能（“链路”）通过第一（）

答

我不知道你正在使用的jQuery的，但简单的方法尝试加载如下页面加载标签：

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

加载页面时显示第一个标签

相关推荐