ページがロードされたときに最初のタブを表示する

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

あなたは、結合後の最初のリンクをクリックを誘発することができます。

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

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

Answer 3

ただ、すなわち、それが見えるようにHTMLとCSSを使用します。

タブ1 タブ2

タブ1の内容 タブ2の内容

したがって、最初のリンクはクラスactiveで始まり、最初のタブはdisplay:blockで可視として開始されます。

Answer 4

私は表示ロジックをカプセル化します。

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 5

あなたは関数内のコードをラップすることはできますか？イベントの内部から関数を呼び出し、オブジェクト$（this）を渡します。 。私はあなたが使用しているjqueryのわからないが、単純な方法で、以下のように、ページの読み込み中にタブをロードしようとする最初の（）

Answer 6

（「.link」）を渡して、ページの読み込みの関数を呼び出します。

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