jqueryの - 現在のタブで開いてリンクの代わり

Question

ページを残して、私はjqueryのに非常に新しいだと私はあなたが以下の助けが必要：

私は、jqueryのタブを含むファイル「mainPage.jsp」を持っています現時点では1つのタブしかありません。 このタブの内容は、ユーザーのテーブルを作成するインクルードされたJSPファイルusers.jspです。ユーザーが代わりにページを変更するので、私は新しいコンテンツが現在のタブに提示することにしたい、このリンクをクリックするとその（

<a href="userDetails.jsp?userid=<%=user.getUserID()%>" style="color: blue;">Details</a> 

： 各ユーザーの行には、次のリンクを含む「詳細」列が含まれていますそれが現在行っていることです）。

あり、それを行う方法について次のリンクで説明があるが、私は私が何か間違ったことをやっていると思います。私のmainPage.jsp

open links in the current tab instead of leaving the page

：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Users</a></li> 
    </ul> 

    <div id="tabs-1"> <jsp:include page="users.jsp" /> </div> 

</div> 

は、

このページのスクリプト：

<script type="text/javascript"> 

$(document).ready(function() { 

    $('#tabs').tabs(); 
    $('#tabs').on('click', 'a', function(event) { 
     $.get($(this).attr('href'), function (response){ 
      $(this).parent().html(response); 
      event.preventDefault(); 
     }); 
    }); 
}); 
</script> 

も試み：

<a href="userDetails.jsp?userid=14" style="color: blue;">Details</a> 

任意のアイデア：

<script type="text/javascript"> 

$(document).ready(function() { 

    $('#tabs').tabs(); 
    $('#tabs').on('click', 'a', function(event) { 
     $(ui.panel).load(this.href); 
     event.preventDefault(); 
     }); 
}); 

</script> 

これは（JSPを実行した後に）表示されるリンクのですか？

ありがとうございます！

Answer 1

方法について：解決策を見つけ

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#tabs').tabs(); 
     $('#tabs').on('click', 'a', function(event) { 
      event.preventDefault(); 
      $.get($(this).attr('href'), function (response){ 
       $(this).parent().html(response); 
      }); 
     }); 
    }); 
</script> 

Answer 2

、これはスクリプトである必要があります。

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#tabs').tabs({ 
     load: function(event, ui) { 
      $(ui.panel).delegate('a', 'click', function(event) { 
       $(ui.panel).load(this.href); 
       event.preventDefault(); 
      }); 
     } 
    }); 

    $("#tabs").bind('tabsselect', function(event, ui) { 
     window.location.href=ui.tab; 
    }); 

}); 

</script> 

そして、それの使用：

<div id="tabs"> 
     <ul> 
      <li><a href="users.jsp"><span>Users</span></a></li> 
      <li><a href="conference.jsp"><span>Conferences</span></a></li> 
      <li><a href="companies.jsp"><span>Companies</span></a></li> 
     </ul> 
</div> 

この理由内容についてたとえば、最初のタブのusers.jspです。 usrs.jspでは、私はリンクを使用します：

そして、userDetails.jspがクリックされたときに同じタブで開くようになりました。

Answer 3

は、この全体に蘭と以前の答えは助けにはならなかったが、これはやった：

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
      load: function (event, ui) { 
       $('a', ui.panel).live('click', function() { 
        $(ui.panel).load(this.href); 
        return false; 
       }); 
      } 
     }); 
    }); 
<script>