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现在在单击时在同一个选项卡中打开。

Answer 2

对此以及之前的答案没有帮助，但这样做了：

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

Answer 3

如何：

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

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

3 个答案: