2013-10-11 105 views
0

我正在一個asp.net頁面上工作。我已經爲選項卡添加了一個jquery插件。這是基於html5並具有這樣的html:打開一個新的asp.net頁面點擊jquery選項卡

<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也會改變。

+0

所以你要對這個不刷新加載它? – Robert

+0

任何有刷新或無刷新(無刷新都是最好的) – DotnetSparrow

+0

當你說「URL也改變了」時,你的意思是URL中的哈希值? (我猜這個頁面實際上沒有重定向。) – Archer

回答

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'}); 

check this

+0

它會改變網址嗎? – DotnetSparrow

相關問題