jquery製表符不轉換

我決定試試我的手在jQuery $('#tabs').tabs();並使我的選項卡垂直。我遇到了在選擇標籤時沒有顯示內容的問題。這個問題的一個例子是here - JSFIDDLE我知道這顯然是我錯過的東西。我試着查看Jquery UI文檔，但仍然不知道我做錯了什麼。我將不勝感激知道爲什麼我有這個問題，任何其他提示也將是非常讚賞jquery製表符不轉換

來源

2012-11-19 Octavius

你也有重複的'id's。這是無效的html，你不能有多個具有特定id的元素。 – jmoerdyk

好的，謝謝你的建議@jmoerdyk – Octavius

試試這個例子：http://jqueryui.com/tabs/#vertical

你需要一些額外的CSS（你的JS小提琴沒有加載了jQuery UI CSS）例如：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">

需要額外的擺弄，但這裏是一個updated fiddle

來源

2012-11-19 18:55:34

好吧，更新的小提琴是水平的。目標是垂直的，我正在看你現在給我的鏈接 – Octavius

兩個問題：

您有重複的元素id s。每個id的第一個實例指向鏈接，而不是內容。從鏈接中刪除id。
選項卡窗口小部件依賴於CSS。將base stylesheet添加進來，它就可以工作。

jsfiddle.net/Kxtvg/280

爲了得到你想要的佈局，你必須先從base stylesheet並對其進行修改。

來源

2012-11-19 19:09:44 gilly3

我想保持垂直 – Octavius

@Octavius - 要得到你想要的佈局，你必須從[基本樣式表]（http ：//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css）並修改它。 – gilly3

首先，您的ID不能在一頁上出現兩次。將它從<li>標籤中移除。其次，由於某種原因，jsfiddle不會拉動相關的css數據。我切割並粘貼到那裏，現在它工作。

http://jsfiddle.net/Kxtvg/279/

來源

2012-11-19 19:10:15

我想保持垂直 – Octavius

我包括一些代碼在頭section.Here它。

 <head>   
     <meta charset="utf-8" /> 
     <title>jQuery UI Tabs - Vertical Tabs functionality</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
     $(function() { 
     $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
     $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
     }); 
     </script> 
     </head>

參考： http://jqueryui.com/tabs/#vertical

工作型號： http://jsfiddle.net/abhijalgaonkar/qTXnN/

儘量不要修改CSS源CSS file.Over騎的CSS將是一個更好的選擇。

讓我知道它是否有幫助....

來源

2012-11-19 19:25:56