2017-02-16 16 views
0

私はjQueryタブメニューコールajaxを持っています。jQueryタブメニューアクティブメニューを設定してコンテンツを読み込みます

メニューは完璧に動作していますが、ページがロードされると常にロードされる最初のタブが表示されます(アクティブを意味します)。

あなたがここにフィドル見ることができます。この場合https://jsfiddle.net/waspinator/rw8ujfg3/

<ul class="nav nav-tabs tabs-up " id="friends"> 
    <li active><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li> 
    <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li> 
    <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li> 

<div class="tab-content"> 
    <div class="tab-pane active" id="contacts"> 

    </div> 
    <div class="tab-pane" id="friends_list"> 
    </div> 
    <div class="tab-pane urlbox span8" id="awaiting_request"> 

    </div> 
</div> 

JS

$('[data-toggle="tabajax"]').click(function(e) { 
var $this = $(this), 
    loadurl = $this.attr('href'), 
    targ = $this.attr('data-target'); 

$.get(loadurl, function(data) { 
    $(targ).html(data); 
}); 

$this.tab('show'); 
return false; 
}); 

は、私が連絡先のコンテンツがロードされたページにロードします。これはどのように設定できますか?

答えて

1

$('#contacts_tab').trigger('click'); idを使用することが許可されています。

+0

こんにちは、フィドルに更新していただけますか? –

+0

@HiDayurieDave https://jsfiddle.net/maxcache/wm6rnpjx/ – Searching

1

これは動作するはずです。関数を抽象化してイベントにバインドするだけでなく、呼び出すために選択された最初のタブを使用して呼び出すこともできます。 (EDIT:。。私のミスは、コピーされたので、申し訳ありませんが、私はそれはまた、それをテストし、キンクまたは2を動作するようにいくつかのことを変更し、間違った前に、あなたの関数に間隔を得た)あなたならば

function doAjaxStuff(event, tab) { 
    var $this = tab || $(this) 
    var $this = tab || $(this), 
     loadurl = $this.attr('href'), 
     targ = $this.attr('data-target'); 

    $.get(loadurl, function(data) { 
     $(targ).html(data); 
    }); 

    $this.tab('show'); 
    return false; 
} 

doAjaxStuff(null, $('.nav-tabs li:first-child a')) 

$('[data-toggle="tabajax"]').click(doAjaxStuff); 
+0

動作しません、あなたはフィドルで更新してみてください。 –

+0

私はちょうど今フィディドからこれをまっすぐにコピーしました。コピー/貼り付けとそれは動作するはずです! :)(また、フィドルを更新しました)。 – thesublimeobject

関連する問題