0

私はasp.netページに取り組んでいます。タブ用の jquery プラグインを追加しました。これは html5 ベースで、次のような html があります。

 <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#all">All (902)</a></li>
            <li id="tabToday"><a href="#today">Today (111)</a></li>
            <li><a href="#since">Since last visite (432)</a></li>
            <li><a href="#vacancies">Vacancies (92)</a></li>
            <li><a href="#trainings">Trainings (543)</a></li>
            <li><a href="#tenders">Tenders (233)</a></li>
            <li><a href="#scholarships">Scholarships (1)</a></li>
            <li><a href="#other">Other (4)</a></li>
            <li class="pull-right tab-tbilisi"><a class="tab-tbilisi-a" href="#tbilisi">RUSTAVI</a></li>
            <li class="pull-right tab-kataisi"><a class="tab-kataisi-a" href="#kataisi">BATUMI</a></li>
            <li class="pull-right tab-batumi"><a class="tab-batumi-a" href="#batumi">KATAISI</a></li>
            <li class="pull-right tab-rustavi"><a class="tab-rustavi-a" href="#rustavi">TBILISI</a></li>
        </ul>
 <div class="tab-content">
            <div class="tab-pane active" id="all">
                <div class="jobs-table">
jobs listing
  </div>
            </div>

          <div class="tab-pane" id="since">
                Since</div>
            <div class="tab-pane" id="vacancies">
                Vacancies</div>
            <div class="tab-pane" id="trainings">
                Trainings</div>
            <div class="tab-pane" id="tenders">
                Tenders</div>
            <div class="tab-pane" id="scholarships">
                Scholarships</div>
            <div class="tab-pane" id="other">
                Other</div>
            <div class="tab-pane" id="tbilisi">
                Tbilisi</div>
            <div class="tab-pane" id="kataisi">
                Kataisi</div>
            <div class="tab-pane" id="batumi">
                Batumi</div>
            <div class="tab-pane" id="rustavi">
                Rustavi</div>
        </div>
    </div>

このプラグインは、ヘッダーがクリックされたときに div を読み込みます。ユーザーがヘッダーをクリックすると、新しいasp.netページがタブの内容に読み込まれるように変更したいと思います。Iframe を使用したくありません。私は以下のようなものを使用することができ、それは動作します:

 $("#tabToday").click(function () {


                $('#today').load('controls/TodaysVacancies.ascx', function (response, status, xhr) {

                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        alert(msg + xhr.status + " " + xhr.statusText);
                    }
                }
             );

            });

しかし、タブが変更されると、URLも変更されます。

4

1 に答える 1

0

hrefタグに属性を設定し、 <a>ajax 経由でロードするだけです。

<ul class="css-tabs" id='myTab'>
  <li><a href="ajax1.htm">Tab 1</a></li>
  <li><a href="ajax2.htm">Second tab</a></li>
  <li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>

<!-- single pane. it is always visible -->
<div class="css-panes">
  <div style="display:block"></div>
</div>

jQuery

$("#myTab").tabs("div.css-panes > div", {effect: 'ajax'});

これをチェックして

于 2013-10-11T09:43:36.477 に答える