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

相关问题