1

我对 jquery 很陌生，我需要您在以下方面提供帮助：

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

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

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

以下链接中有关于如何做到这一点的解释，但我想我做错了什么：

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

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

有任何想法吗？

谢谢！

4

3 回答 3

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

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

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

于 2012-04-15T08:57:08.523 回答
1

遇到这个和以前的答案没有帮助，但这确实：

<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>
于 2012-08-09T22:29:45.670 回答
0

怎么样：

<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>
于 2012-04-04T19:24:05.993 回答