jquery - 在当前选项卡中打开链接而不是离开页面

Question

我对 jquery 非常陌生，需要您在以下方面提供帮助:

我有一个文件“mainPage.jsp”，其中包含 jquery 选项卡，目前只有一个选项卡。该选项卡的内容是一个包含的 jsp 文件 users.jsp，它构建了一个用户表。每个用户行都包含一个“详细信息”列，其中包含以下链接:

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

当用户单击此链接时，我希望新内容显示在当前选项卡中，而不是更改页面(这就是当前所做的)。

以下链接中有关于如何执行此操作的说明，但我想我做错了什么:

open links in the current tab instead of leaving the page

我的mainPage.jsp:

<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>

也尝试过:

   <script type="text/javascript">

$(document).ready(function() {

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

</script>

这是出现的链接(运行 jsp 后):

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

有什么想法吗？

谢谢!

Answer 1

找到解决方案，这应该是脚本:

    <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 中我使用链接:

<td><a href="userDetails.jsp?userid=<%=user.getUserName()%>"> <img src="/conf4u/resources/imgs/yada.png" alt=""> Details </a> </td>

并且 userDetails.jsp 现在在单击时会在同一选项卡中打开。