2013-06-03 123 views
1

工作下面是我的代碼,在小提琴jQuery UI的不是標籤

做工精細鏈接

小提琴鏈接:http://jsfiddle.net/JdU8N/

但相同的代碼不會在我的本地工作。我已經正確加載了jQuery文件並啓動了$(document).ready(function(){});中的選項卡。隨着螢火蟲,我沒有得到任何錯誤太

這是我的代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Untitled Document</title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('.tabs').tabs(); 
       $('.subtabs').tabs({ 
        activate: function(event, ui) { 
         //get relative li index 
         var secondTabSelected = $(ui.newTab).index(); 
         console.log(secondTabSelected); 
        } 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Tab 1</a></li> 
       <li><a href="#tabs-2">Tab 2</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <div class="subtabs"> 
        <ul> 
         <li><a href="#tabs-1a">Tab 1-A</a></li> 
         <li><a href="#tabs-1b">Tab 1-B</a></li> 
        </ul> 
        <div id="tabs-1a"> 
         <p>Tab 1A</p> 
        </div> 
        <div id="tabs-1b"> 
         <p>Tab 1B</p> 
        </div> 
       </div> 
      </div> 
      <div id="tabs-2"> 
       <div class="subtabs"> 
        <ul> 
         <li><a href="#tabs-2a">Tab 2-A</a></li> 
         <li><a href="#tabs-2b">Tab 2-B</a></li> 
        </ul> 
        <div id="tabs-2a"> 
         <p>Tab 2A</p> 
        </div> 
        <div id="tabs-2b"> 
         <p>Tab 2B</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

任何幫助,將不勝感激......

回答

5

你的標籤一定是創建的,但沒有的jQuery UI樣式表加載到您的HTML中,這是需要給出標籤的外觀。

您可以從jquery ui website

下載使用主題的CSS下面是lightness主題CDN位置。

在這裏你去一個Demo Fiddle與您的HTML標記和CSS應用到它。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css"/> 

這裏是一個SO答案是提到有關所有主題jQuery UI的CDN路徑。

+0

鏈接,他在哪裏可以得到它...? –

+1

謝謝... !!有用...!!! – Max25

+0

@ Max25不客氣.. :) – PSL

2

您需要添加一個jquery-ui.css文件。它缺少那裏:)

你可以找到幾個主題的UI CSS here