2012-02-28 86 views
0

我希望有人可以幫助我在加載頁面時加載第一個標籤(使其處於活動狀態)。現在,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(); 
});​ 

任何想法?

回答

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

這個,或者任何類的UI標籤添加到活動標籤 – Johan 2012-02-28 13:08:16

+0

謝謝。有用!加載頁面後,只有第二個標籤內容(div2)不會隱藏。我試圖把$('。content5#div2')。hide();在準備好的功能,但它不工作。 編輯:對不起還解決了:$('。content5:last')。hide();. – Erikdg 2012-02-28 13:25:40

0

可以綁定後觸發第一個鏈接的點擊:

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

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

0

只需使用HTML和CSS來使其可見,即:

表1 表2

表1的內容 標籤2的內容

因此,第一個鏈接從active開始,第一個標籤從display:block開始顯示爲可見。

1

我會封裝顯示邏輯;

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

你可以用代碼的功能?從事件內部調用函數,傳入thr對象$(this)。呼叫在頁面加載的功能(「鏈路」)通過第一()

0

我不知道你正在使用的jQuery的,但簡單的方法嘗試加載如下頁面加載標籤:

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