jQuery的 - 在當前標籤，而不是離開頁面

打開鏈接，我很新的jQuery和我需要你幫忙以下：jQuery的 - 在當前標籤，而不是離開頁面

我有一個包含jQuery的標籤文件「mainPage.jsp」目前只有一個標籤。此選項卡的內容是一個包含的jsp文件users.jsp，它構建了一個用戶表。每個用戶行包含其中包含以下鏈接「詳細信息」欄：

<a href="userDetails.jsp?userid=<%=user.getUserID()%>" style="color: blue;">Details</a>

當用戶點擊，而不是改變頁面此鏈接我希望新的內容，在當前選項卡中呈現的，（這是目前它所做的）。

有關於如何做到這一點下面的鏈接解釋，但我想我做錯了什麼：

open links in the current tab instead of leaving the page

我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>

什麼想法？

謝謝！

來源

2012-04-04 Blue

似乎一切都OK了我。唯一讓我想到的是，之前發生了一些'JS'錯誤，並停止了進一步的執行（即防止默認的點擊事件）。你檢查過「Firebug」的錯誤嗎？ – 2012-04-04 18:53:45

– zod 2012-04-04 18:55:33

看起來像ui.panel不存在。 @jperovic是對的，在腳本重寫默認鏈接動作之前查找可能發生的Javascript錯誤。僅供參考，delegate（）已被棄用，並且jQuery建議使用on（）前進http://api.jquery.com/on/ – 2012-04-04 19:06:21

如何：

<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-04 19:24:05 Relic

現在鏈接什麼都不做，但可能會有進展，因爲現在當我按下鏈接時，它實際上停止了調試（你可以閱讀我上面的評論，它之前沒有這樣做）。 – Blue 2012-04-04 19:30:45

找到了解決方案，這應該是腳本：

<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我使用link：

<td><a href="userDetails.jsp?userid=<%=user.getUserName()%>"> <img src="/conf4u/resources/imgs/yada.png" alt=""> Details </a> </td>

，並單擊時在同一標籤userDetails.jsp現在打開。

來源

2012-04-15 08:57:08 Blue

跑過這和以前的答案沒有幫助，但這並：

<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-09 22:29:45 dsp4774

jQuery的 - 在當前標籤，而不是離開頁面

回答

相關問題