卡在jQuery UI選項卡上

Question

我有三個要放在標簽中的HTML表格。

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

最后，我需要在第3個選項卡中為用戶提供搜索選項，並將這些結果（html結果）放入該選項卡。

問題是：當我運行當前代碼時，它不允許我單擊選項卡（在FireFox中顯示為難看的樣式），並且僅顯示第3個選項卡。

這是以前。

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