2017-05-07 10 views
0

私は、ajax呼び出しからビューを取得した後にbootstrap 3タブのactive tabを設定しようとしていますが、動作しません。あなたは私が$('.nav-tabs a[href="#tab_1_2"]').tab('show');をやってみましたし、私も$('#tab a[href="#tab_1_2"]').tab('show');を試みたが、ことを見ることができるようにajax呼び出しからビューを取得した後にアクティブなタブを設定する方法は?

<script type="text/javascript"> 
function load_page() 
{ 


    $.ajax(
     { 
     url: 'notification_table/', 
     type: 'GET', 
     dataType: 'html', 
     }).done(
       function(data) 
       { 
       $('#home_view').html(data); 
       } 
       ); 

    $('.nav-tabs a[href="#tab_1_2"]').tab('show'); 
} 

window.onload = function() 
{ 
    load_page(); 
    setInterval(function() { 
    load_page(); }, 5000); 
} 
</script> 

ビューは、このようなものです:

<div class="portlet light "> 
    <div class="portlet-title tabbable-line"> 
     <div class="caption"> 
      <i class="icon-globe font-dark hide"></i> 
      <span class="caption-subject font-dark bold uppercase">TODAY</span> 
     </div> 
     <ul id="tab" class="nav nav-tabs"> 
      <li class="active"> 
       <a href="#tab_1_1" class="active" data-toggle="tab"> Collections </a> 
      </li> 
      <li> 
       <a href="#tab_1_2" data-toggle="tab"> Activities </a> 
      </li> 
     </ul> 
    </div> 
    <div class="portlet-body"> 
     <!--BEGIN TABS--> 
     <div class="tab-content"> 
      <div class="tab-pane active" id="tab_1_1"> 

そして、ここではスクリプトです両方とも機能していません。

私はここで間違っていますか?

+0

エラーとは何ですか? –

+0

エラーは表示されませんが、アクティブなクラスは変更されません。 –

答えて

0

class="active"liの中でのみ使用してくださいanchor tagには、ほぼすべての権利があります。

<li class="active"> 
    <a href="#tab_1_1" data-toggle="tab"> Collections </a> 
</li> 
0

"AJAX経由でコンテンツを読み込んだ後にjQueryが動作しない"と思われるかもしれません。 jQuery doesn't work after content is loaded via AJAX

前に自分のコードを修正しましたが、私がやったことを忘れてしまいました。

関連する問題