試圖在.NET Web應用程序中實現jQuery選項卡

我試圖執行this simple example。但是，Javascript不起作用（所有內容始終顯示，沒有標籤「切換」正在發生）。 所有的JS文件都在本地託管。試圖在.NET Web應用程序中實現jQuery選項卡

在我的腦海內容佔位符：

<link rel="stylesheet" type="text/css" href="jquery-ui.css"> 
<script src="jquery.min.js"></script> 
<script src="jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    // not working 
    $(document).ready(function() { 
     $("#tabs").tabs(); 
    }); 
</script>

在我的主體內容佔位符：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">One</a></li> 
    <li><a href="#tabs-2">Dos</a></li> 
    <li><a href="#tabs-3">Drei</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Blah blah blah.</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Blah some more.</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Blah again.</p> 
    </div> 
</div>

所以從SO搜索遠和任何谷歌已經採取了我，這就是我已發現並嘗試過（每個列出的結果都有）：

將jQuery代碼包裝爲$(document).ready(function() { // code here });而不是簡單的函數（$(function() { $("#tabs").tabs(); });）。這兩種方法都行不通。
而不是$("#tabs").tabs();，使用$("#<%= tabs.ClientID %>").tabs();，以便.NET可以獲取html元素的ID。除了沒有工作，這也產生了錯誤：tabs does not exist in the current context。
將JavaScript放在與#tabs div標籤相同的內容佔位符中。仍然無法正常工作。
將runat="server"添加到#tabs div標記。仍然無法正常工作。
刪除設計器文件，然後右鍵單擊aspx文件並選擇「轉換爲Web應用程序」。這不起作用，因爲這是已經一個Web應用程序，並沒有設計器文件。

我想不出還有什麼辦法可以使它工作。

更新：我被要求查看我的瀏覽器控制檯日誌，發現如下：

其中的JS文件是給HTTP/1.1 401 Unauthorized錯誤。我注意到它被阻塞了，我從文件系統中解除了阻塞，但它仍然無法工作。

來源

2014-02-18 Dan

是否有在瀏覽器控制檯錯誤或404的？ – DAC84

只有當你在標籤上有'runat ='server''時，你才需要做'$（「＃<％= tabs.ClientID％>」）。tabs（）;'。 – mason

您的JavaScript的作品 - 見[小提琴]（http://jsfiddle.net/DAC84/5ezQW/）。我會建議檢查所有的JS在瀏覽器的網絡選項卡中正確加載。如果您使用的是Web窗體，請檢查DIV的ID是否未更改。 – DAC84

我認爲問題可能在jQuery腳本的路徑。

嘗試檢查資源的加載在瀏覽器控制檯，或者你可以嘗試包括jQuery的服務器的jQuery ...

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

來源

2014-02-18 16:17:49 user2886551

我在本地託管了所有的JS。 – Dan

無論出於何種原因，這不是在本地工作，從他們的作品中加載它們。謝謝。 – Dan

試圖在.NET Web應用程序中實現jQuery選項卡

回答

相關問題