2013-10-11 3 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

изменит ли он URL? – DotnetSparrow

Смежные вопросы