卡住使用jQuery UI選項卡

Question

我有我希望放入選項卡的hree html表格。

所有三個表可以使用AJAX加載，但我想顯示第一個表，並且也允許第一個表是ajaxable。

最後，我需要讓用戶在第三個選項卡中選擇SEARCH，然後這些結果（html結果）進入該選項卡。

問題是：當我運行我當前的代碼時，它不允許我單擊選項卡（它顯示FireFox中的一些醜陋風格），僅顯示第三個選項卡。

這是以前的。

<h2>Title 1</h2> 
<table>....data_A....</table> 
<br/><br/> 

<h2>Title 2</h2> 
<table>....data_A....</table> 
<br/><br/> 

<h2>Title 3 - Search</h2> 
<input id="name" type="textbox" /> 
<input id="search" type="submit" value="Search" />  
<br/><br/> 

這是我的jQuery嘗試代碼。

<asp:Content ContentPlaceHolderID="JavaScriptContent" runat="server"> 
<link type="text/css" href="../../Content/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" /> 

<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="/Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> 
<SCRIPT type=text/javascript> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</SCRIPT> 
</asp:Content> 

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> 

<div id="tabs"> 
    <ul> 
     <li href="ajax/data_a">Title 1</li> 
     <li href="ajax/data_b">Title 2</li> 
     <li href="#tab-3">Search</li> 
    </ul> 
    <div id="tab-1"> 
     .... data_A table is put here ... 
     .... but will be updated via ajax when the tabs is clicked. 
    </div>   
    <div id="tab-3"> 
     <input id="name" type="textbox" /> 
     <input id="search" type="submit" value="Search" />  
    </div> 
</div> 
</asp:Content> 

任何人都可以幫我嗎？我做錯了什麼？

歡呼:)

Answer 1

你必須有li的內部的a標籤。 li的沒有href屬性。

<li><a href="ajax/data_a">Title 1</a></li> 
<li><a href="ajax/data_b">Title 2</a></li> 
<li><a href="#tab-3">Search</a></li> 

就在源位置：http://stilbuero.de/jquery/tabs_3/