1

私はjqueryに非常に慣れていないので、次の点で助けが必要です:

jqueryタブを含むファイル「mainPage.jsp」があり、現時点ではタブが1つしかありません。このタブの内容は、ユーザーのテーブルを作成する、組み込まれている 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 に答える